AI 助理
备案控制台
开发者社区 云计算 文章 正文

html+css实战184-布局完成

2022-08-07 128
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： html+css实战184-布局完成

    commom.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目代码准备</title>
    <!-- 外链式样式表的生成 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
        <!-- 快捷导航 -->
        <div class="shortcut">
            <div class="wrapper">
                <ul>
                    <li><a href="#">请先登录</a></li>
                    <li><a href="#">免费注册</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">在线客服</a></li>
                    <li><a href="#"><span></span>手机版</a></li>
                </ul>
            </div>
        </div>
        <div class="header wrapper">
            <div class="logo">
                <h1><a href="#">小兔鲜儿</a></h1>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">美食</a></li>
                    <li><a href="#">餐厨</a></li>
                    <li><a href="#">电器</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">洗护</a></li>
                    <li><a href="#">孕婴</a></li>
                    <li><a href="#">服装</a></li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="搜一搜">
                <!-- 定位 放大镜 -->
                <span></span>
            </div>
            <div class="car">
                <span>2</span>
            </div>
        </div>
        <!-- 版权区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>价格亲民</span>
                    </li>
                    <li>
                        <span>物流快捷</span>
                    </li>
                    <li>
                        <span>品质新鲜</span>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">售后服务</a> |
                    <a href="#">配送与验收</a> |
                    <a href="#">商务合作</a> |
                    <a href="#">搜索推荐</a> |
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </div>
</body>
</html>

index.html

/* 各个页面相同的样式表 : 头, 尾部 */
/* 版心 */
.wrapper {
    width: 1240px;
    margin: 0 auto;
}
/* 快捷导航 */
.shortcut {
    height: 52px;
    background-color: #333;
}
.shortcut .wrapper {
    height: 52px;
}
/* 目的: 所有的文字内容居右侧对齐 */
.shortcut .wrapper ul {
    float: right;
}
/* 目的: 让所有的文字在一行显示 */
.shortcut .wrapper li {
    float: left;
    line-height: 52px;
}
.shortcut .wrapper a {
    padding: 0 16px;
    border-right: 1px solid #666;
    font-size: 14px;
    color: #dcdcdc;
}
.shortcut .wrapper a span {
    display: inline-block;
    margin-right: 8px;
    width: 11px;
    height: 16px;
    background-image: url(../images/sprites.png);
    background-position: -160px -70px;
    vertical-align: middle;
}
/* 头部 */
.header {
    margin: 30px auto;
    height: 70px;
}
.logo {
    float: left;
    width: 207px;
    height: 70px;
}
.logo h1 {
    width: 207px;
    height: 70px;
}
.logo h1 a {
    display: block;
    width: 207px;
    height: 70px;
    background-image: url(../images/logo.png);
    background-size: contain;
    /* 目的: 让h1里面的字看不见 */
    font-size: 0;
}
.nav {
    float: left;
    margin-left: 40px;
    height: 70px;
}
.search {
    position: relative;
    float: left;
    margin-top: 24px;
    margin-left: 34px;
    width: 172px;
    height: 30px;
    border-bottom: 2px solid #e7e7e7;
}
.nav li {
    float: left;
    margin-right: 48px;
    line-height: 70px;
}
.nav li a {
    padding-bottom: 7px;
}
.nav li a:hover {
    color: #27ba9b;
    border-bottom: 1px solid #27ba9b;
}
.search input {
    padding-left: 30px;
    width: 172px;
    height: 28px;
}
.search input::placeholder {
    font-size: 14px;
    color: #ccc;
}
.search span {
    position: absolute;
    left: 2px;
    top: 0;
    /* display: inline-block; */
    width: 18px;
    height: 18px;
    background-image: url(../images/sprites.png);
    background-position: -79px -69px;
}
.car {
    position: relative;
    float: left;
    margin-top: 28px;
    margin-left: 15px;
    width: 23px;
    height: 23px;
    background-image: url(../images/sprites.png);
    background-position: -119px -69px;
}
.car span {
    /* 绝对定位, 盒子具备行内块特点 */
    position: absolute;
    right: -13px;
    top: -6px;
    width: 20px;
    height: 15px;
    background-color: #e26237;
    border-radius: 8px;
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 15px;
}
/* 版权footer */
.footer {
    height: 342px;
    background-color: #333;
}
.footer .wrapper {
    width: 1393px;
}
.footer .top {
    padding-top: 59px;
    padding-left: 135px;
    height: 175px;
    border-bottom: 3px solid #434343;
}
.footer .top li {
    position: relative;
    float: left;
    margin-right: 300px;
    width: 195px;
    height: 58px;
    line-height: 58px;
}
.footer .top li:last-child {
    margin-right: 0;
}

image.png

关键词：
HTML CSS
CSS html
CSS布局
CSS实战
HTML布局
前端歌谣
目录
相关文章
东方睿赢
|
29天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
58 7
土木林森
|
29天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
37 6
龙大吉
|
29天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
42 5
土木林森
|
29天前
|
前端开发 JavaScript UED
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势，包括样式表优化、DOM操作减少、图像优化等技术，并分析了电商网站的具体案例，强调了技术演进对Web性能的深远影响。
土木林森
35 5
html的七十二变
|
1月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局（Flexbox）：构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局（Flexbox）是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例，帮助读者快速掌握这一强大布局方法。
html的七十二变
149 3
异步社区
|
移动开发 API HTML5
《HTML5实战》——导读
异步社区
1757 0
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
107 1
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
48 1
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
35 1
[HTML、CSS]知识点
LALA
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
LALA
63 12

热门文章

最新文章

  • 1
    CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
  • 2
    jQuery和CSS3滑动展开菜单按钮插件
  • 3
    探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
  • 4
    页面滚动触发css3动画js插件
  • 5
    纸屑飘落生日蛋糕场景js+css3动画特效
  • 6
    纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
  • 7
    jQuery和CSS3精美翻页式电子时钟特效
  • 8
    Foundation CSS 可见性1
  • 9
    Foundation CSS 参考手册1
  • 10
    Foundation CSS 参考手册2
  • 1
    【HTML】——VSCode 基本使用入门和常见操作
    16
  • 2
    前端基础之HTML
    14
  • 3
    将html_table2结果转化为tibble的最佳实践
    32
  • 4
    利用 html_table 函数轻松获取网页中的表格数据
    30
  • 5
    HTML（HyperText Markup Language，超文本标记语言）
    61
  • 6
    HTML（HyperText Markup Language）和XML（Extensible Markup Language）
    46
  • 7
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
    62
  • 8
    html5 canvas五彩碎纸屑飘落动画特效
    35
  • 9
    HTML5 3D地球仪可按经纬坐标定位特效
    31
  • 10
    HTML5实现人机对战的国际象棋AI版
    30

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)