美文网首页
前端入门06 -- HTML5和CSS3提高，项目实战

前端入门06 -- HTML5和CSS3提高，项目实战

作者: YanZi_33 | 来源:发表于2021-12-21 17:17 被阅读0次

HTML5新特性

  • HTML5的新增特性主要是针对以前的不足，增加了一些新的标签，新的表单和新的表单特性；
  • 这些新增的特性都有兼容性问题，基本是IE9+版本以上的浏览器才会支持，若不考虑兼容性问题，可以大量使用这些新特性；
  • HTML5新增的语义化标签有如下：
    • header：头部标签；
    • nav：导航栏标签；
    • section：定义文档某个区域；
    • aside：侧边栏标签；
    • footer：尾部标签；
image.png
  • 在IE+9，需要将这些标签元素转换为块级元素；
  • 案例代码：
<!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>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        header,
        nav {
            width: 800px;
            height: 100px;
            background-color: pink;
            margin: 15px auto;
            border-radius: 15px;
        }
        
        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    </style>

</head>

<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section></section>
</body>
</html>

  • HTML5新增的多媒体标签有如下：

    • video：视频；
    • audio：音频；

  • video支持三种视频格式，尽量使用MP4格式的视频；

    Snip20211221_26.png

  • video的常见属性如下所示：

    Snip20211221_27.png

  • auto标签支持三种格式的音频，如下所示：

image.png
  • auto标签的常见属性如下：
image.png
  • 案例代码：
<!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>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>

<body>
    <video src="xxxx" autoplay="autoplay" loop="loop" muted="muted" poster="xxx"></video>
    <audio src="xxxx" autoplay="autoplay"></audio>
</body>

</html>

  • 谷歌浏览器将音频和视频的自动播放给禁止了；

  • HTML5新增的input标签有如下：

image.png
  • 案例代码如下：
<!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>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        form {
            margin-top: 20px;
            margin-left: 40px;
        }
        
        li {
            list-style: none;
        }
    </style>

</head>

<body>
    <form action="">
        <ul>
            <li>邮箱: <input type="email"></li>
            <li>网址:<input type="url"></li>
            <li>日期: <input type="date"></li>
            <li>日期: <input type="time"></li>
            <li>数量: <input type="number"></li>
            <li>手机号码: <input type="tel"></li>
            <li>搜索: <input type="search"></li>
            <li>颜色: <input type="color"></li>
        </ul>
    </form>
</body>

</html>
  • HTML5新增的表单属性有如下：
image.png
  • 案例代码：
<!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>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        form {
            margin-top: 20px;
            margin-left: 40px;
        }
        
        li {
            list-style: none;
        }
        
        input::placeholder {
            color: pink;
        }
    </style>

</head>

<body>
    <form action="">
        <ul>
            <li>搜索框: <input type="search" required="required" placeholder="老师" autofocus="autofocus" autocomplete="off"></li>
            <input type="file" multiple="multiple">
            <li>提交:<input type=" submit "></li>

        </ul>
    </form>
</body>

</html>

CSS3的新特性

  • 新增的CSS3特性有兼容性问题，在IE+9才支持；
  • 移动端支持优于PC端；
CSS3新增的选择器
  • 属性选择器：可以根据元素特定属性来选择元素，规则如下：
image.png
  • 属性选择器的权重为0010；
  • 代码如下：
<!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>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        input[value] {
            color: pink;
        }
        
        input[type=password] {
            color: red;
        }
        
        div[class^=icon] {
            color: pink;
        }
        
        section[class$=data] {
            color: purple;
        }
    </style>

</head>

<body>
    <input type="text" value="请输入用户名">
    <input type="text">
    <input type="password">
    <div class="icon12">sddsds</div>
    <div class="icon34">fdsfds</div>
    <div class="icon45">fsfds</div>
    <div class="icon56">fsfds</div>
    <div>中为你</div>

    <section class="sddata">dsdsds</section>
    <section class="ssdata">dsdsd</section>
    <section class="dsd">第四</section>
</body>

</html>
  • 结构伪类选择器：主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素，其权重为0010；
image.png
  • 其中nth-child(n)：n可以是数字，关键字和公式，
    • 当n是数字时，表示选择第n个元素，注意子元素从1开始；
    • 当n是关键字even(偶数)，odd(奇数)时，表示选择偶数项，奇数项；
    • 当n是公式时：例如nth-child(2n) n从0开始，依次自增，选择出第0，2，4，6，8....项，其中第0项不存在舍去，超出的选项也舍去；
image.png
  • E: nth-child(n)：将父元素的所有子元素进行排序，先找到第n个元素，然后与E类型进行比较；
  • E: nth-of-type(n)：对父元素里面指定的子元素进行排序，先去匹配E类型，然后再去找第n个元素；
  • 案例代码：
<!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>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /** 选择所有 */
        /* .box div:nth-child(n) {
            color: red;
        } */
        /* 选择奇数 */
        /* .box div:nth-child(odd) {
            color: red;
        } */
        /* 选择偶数 */
        /* .box div:nth-child(even) {
            color: red;
        } */
        /* 选择>=2 */
        /* .box div:nth-child(n+2) {
            color: red;
        } */
        /* .box div:nth-child(2) {
            color: green
        } */
        /* .box div:nth-child(2n) {
            color: hotpink;
        } */
        /* nth-child将所有子盒子进行排列 从1开始，执行的时候 先拿到p与div进行比较发现不同 就不会选择任何元素了*/
        /* section div:nth-child(1) {
            background-color: salmon;
        } */
        /* nth-child将指定的盒子进行排列 从1开始，执行的时候 再去选择第一个元素*/
        
        section div:nth-of-type(2) {
            background-color: salmon;
        }
    </style>

</head>

<body>
    <div class="box">
        <div>人生自古谁无死，留取丹青照汗青</div>
        <div>人生自古谁无死，留取丹青照汗青</div>
        <div>人生自古谁无死，留取丹青照汗青</div>
        <div>人生自古谁无死，留取丹青照汗青</div>
        <div>人生自古谁无死，留取丹青照汗青</div>
        <div>人生自古谁无死，留取丹青照汗青</div>
        <div>人生自古谁无死，留取丹青照汗青</div>
        <div>人生自古谁无死，留取丹青照汗青</div>
        <div>人生自古谁无死，留取丹青照汗青</div>
        <div>人生自古谁无死，留取丹青照汗青</div>
    </div>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <p>光头强</p>
        <div>熊二</div>
    </section>
</body>
</html>
  • 伪元素选择器：可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构；
image.png
  • before与after创建一个元素，但是属于行内元素；
  • 新创建的这个元素在文档中时找不到的，所以我们称之为伪元素；
  • 语法格式：element::before {}；
  • before与after必须有content属性；
  • 伪元素选择器与标签选择器权重相同，权重为0001；
  • before在父元素内容的前面创建元素，after在父元素内容的后面创建元素；
  • 案例代码：
<!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>Document</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        div::before {
            content: '我';
        }
        
        div::after {
            content: '祖宗';
        }
    </style>
</head>

<body>
    <div>是</div>
</body>
</html>
  • 效果图如下：
image.png
  • 伪元素选择器的使用场景：
  • 第一种：伪元素字体图标；
  • 案例代码：
<!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>Document</title>

    <style>
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }
        
        div::after {
            position: absolute;
            //content: '图标';
            content: '\e309'
            right: 10px;
            top: 8px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

<!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>Document</title>
    <style>
        .box {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 50px auto;
        }
        
        .pic {
            width: 100%;
            height: 100%;
            background-color: green;
        }
        /* .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        } */
        
        .box::before {
            content: '';
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .box:hover::before {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="" alt="" class="pic">
        <!-- <div class="mask"></div> -->
    </div>
</body>
</html>
  • 第三种：伪元素清除浮动；
CSS3盒子模型 border-box；
  • CSS3中可以通过box-sizing来指定盒子模型，有两个值分别为content-box与border-box，这样计算盒子大小的方式就发生了改变；
  • box-sizing: content-box 盒子大小为width+padding+border；
  • box-sizing: border-box 盒子大小为width，也就是说padding与border不会撑大盒子了；
CSS3图片的模糊处理
  • 滤镜filter属性将模糊或颜色偏移等图形效果应用与标签元素；
  • filter: blur(数值px)，数值越大，越模糊；
  • 案例代码：
<!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>Document</title>

    <style>
        img {
            filter: blur(15px);
        }
    </style>
</head>

<body>
    <img src="222.png" alt="">
</body>
</html>
CSS3种的cal函数
  • cal()此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>Document</title>

    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        
        .son {
            /* 比父元素宽度小30px */
            width: calc(100% - 30px);
            height: 30px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>
CSS3中的过渡
  • 过渡是CSS3中具有颠覆性的特征之一，当元素从一种样式变换为另一种样式时为元素添加效果；
  • 过渡动画：从一个状态渐渐的过渡到另外一个状态；
  • 过渡经常与:hover 一起搭配使用；
  • 语法格式：transition: 需要过渡的属性 时长 运动曲线 开始时间；
    • 需要过渡的属性：想要变化的CSS属性；
    • 时长：单位为秒 必须写单位；
    • 运动曲线：默认是ease；
    • 开始时间：单位是秒 延时时间 默认为0；
  • 案例代码：
<!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>Document</title>

    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
            /* transition: width 1s, height 1s; */ 
            transition: all 1s;
        }
        
        .father:hover {
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="father"></div>
</body>

</html>
  • transition: width 1s, height 1s与transition: all 1s等价 ，多个属性过渡；
  • 进度条的实现：
  • 案例代码：
<!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>Document</title>

    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            transition: width .5s;
        }
        
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>

</head>

<body>

    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

</html>
  • 效果图如下：
image.png

项目实战

  • 下面开发实战一个电商类的网站，强化前面学习的所有知识点；
网站favicon图标
  • 一般用于作为缩略的网站标识，它显示在浏览器的地址栏或者标签上；
  • 首先制作favicon图标，准备好png格式的图片，借助 比特虫网站，将png图片转换成favicon图标；
image.png
  • 然后将生成的favicon图标 放到网站的根目录下；
  • 最后在html中的head标签之间引入favicon图标；
image.png
网站TDK三大标签SEO优化
  • SEO译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式；
  • SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度；
  • title网站标题：是网站内第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点；
  • 建议：网站名(产品名) - 网站的介绍(不要超过30个字)；
  • 网站说明标签：description
<meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
  • keywords关键字标签：关键词之间用逗号隔开；
<meta name="keywords" content="品购物商城,销售家电,数码通讯,电脑,家居百货,服饰,母婴,图书">
网站logo制作的规则
image.png
  • 工程目录结构如下：
image.png
  • base.css文件代码：
/* 所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    /* CSS3盒子模型 */
    box-sizing: border-box;
}

/* em 和 i标签的文字不倾斜 */
em,i {
    font-style: normal;
}

/* 去掉li的小圆点 */
li {
    list-style: none;
}

img {
    /* border: 0 照顾低版本浏览器 若图片外面包含了链接 会有边框的问题 */
    border: 0;
    /* 取消图片底部有空白缝隙的问题 */
    vertical-align: middle;
}

/* 当鼠标经过按钮时，鼠标样式变成小手 */
button {
    cursor: pointer;
}

/* 设置链接颜色 去除下划线*/
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #c81623;
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 去掉默认的灰色边框 */
    border: 0;
    /* 去掉获取焦点时的蓝色边框 */
    outline: none;
}

/* 设置 背景颜色 字体 字体颜色 */
body {
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666;
}

/* 隐藏 */
.hide,
.none {
    display: none;
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    content: ".";
    display: block;
    height: 0;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
  • common.css文件代码：
/* 声明字体图标 注意修改路径*/
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?y37s2j');
    src:  url('../fonts/icomoon.eot?y37s2j#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?y37s2j') format('truetype'),
      url('../fonts/icomoon.woff?y37s2j') format('woff'),
      url('../fonts/icomoon.svg?y37s2j#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.style_red {
    color: #c81623;
}

/* 快捷导航 shortcut */
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}

.shortcut ul li {
    float: left;
}

.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}

.arrow_icon::after {
    content: '\e900';
    font-family: 'icomoon';
    margin-left: 6px;
}

/* header部分 */
.header {
    position: relative;
    height: 105px;
    /* background-color: pink; */
}

.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
    background-color: powderblue;
}

.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* font-size: 0; */
    text-indent: -9999px;
    overflow: hidden;
}

.search {
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}

/* input与button属于行内块元素 默认两者之间有空白缝隙 可通过添加浮动 消除间隙 */
.search input {
    float: left;
    width: 454px;
    height: 32px;
    padding-left: 10px;
}

.search button {
    float: left;
    width: 80px;
    height: 32px;
    background-color: #b1191a;
    color: #fff;
    font-size: 16px;
}

.hotwords {
    position: absolute;
    top: 66px;
    left: 346px;
}

.hotwords a {
    margin-left: 10px;
}

.shopcar {
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    text-align: center;
    line-height: 35px;
}

.shopcar::before {
    content: '\e93a';
    font-family: 'icomoon';
    margin-right: 5px;
    color: #b1191a;
}

.shopcar::after {
    content: '\e901';
    font-family: 'icomoon';
    margin-left: 10px;
}

.count {
    position: absolute;
    top: -5px;
    left: 100px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    padding: 0 5px;
    border-radius: 7px 7px 7px 0;
}

/* nav模块 */
.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}

.nav .dropdown {
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;
}

.nav .navitems {
    float: left;
}

.dropdown .dt {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-size: 16px;
    margin-top: 2px;
}

.dropdown .dd {
    width: 210px;
    height: 465px;
    background-color: #c81623;
}

.dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
}

.dropdown .dd ul li::after {
    position: absolute;
    top: 3px;
    right: 10px;
    content: '\e901';
    font-family: 'icomoon';
    color: #fff;
    font-size: 14px;
}

.dropdown .dd ul li:hover {
    background-color: #fff;
}

.dropdown .dd ul li:hover a {
    color: #c81623;
}

.dropdown .dd ul li a{
    font-size: 14px;
    color: #fff;
}

.navitems ul li {
    float: left;
}

.navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
}

/* footer模块 */
.footer {
    height: 415px;
    background-color: #f5f5f5;
    padding-top: 30px;
}

.mod_service {
    height: 80px;
    border-bottom: 1px solid #ccc;
}

.mod_service ul li {
    float: left;
    width: 300px;
    height: 50px;
    padding-left: 35px;
}

.mod_service ul li h5 {
    float: left;
    width: 50px;
    height: 50px;
    background-color: aqua;
    margin-right: 8px;
    background: url(../images/service_mode.png) no-repeat;
}

.service_txt h4 {
    padding-top: 3px;
    font-size: 14px;
}

.service_txt p {
    font-size: 12px;
}

.mod_help {
    height: 185px;
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
    padding-left: 50px;
}

.mod_help dl {
    float: left;
    width: 200px;
}

.mod_help dl:last-child {
    width: 90px;
    text-align: center;
}

.mod_help dl dt {
    font-size: 16px;
    margin-bottom: 10px;
}

.mode_copyright {
    text-align: center;
    padding-top: 20px;
}

.mode_copyright .links {
    margin-bottom: 15px;
}

.mode_copyright .copyright {
    line-height: 20px;
}
  • index.css文件代码：
.main {
    width: 980px;
    height: 455px;
    margin-top: 10px;
    margin-left: 220px;
}

.foucs {
    float: left;
    width: 721px;
    height: 455px;
}

.newflash {
    float: right;
    width: 250px;
    height: 455px;
}

.news {
    height: 165px;
    border: 1px solid #e4e4e4;
}

.news_hd {
    height: 33px;
    line-height: 33px;
    padding: 0 15px;
    border-bottom: 1px dotted #e4e4e4;
}

.news_hd h5 {
    float: left;
}

.news_hd .more {
    float: right;
}

.news_bd {
    padding: 5px 15px 0;
}

.news_bd ul li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news_hd .more::after {
    content: '\e901';
    font-family: 'icomoon';
}

.lifeservice {
    /* 切除溢出的部分 */
    overflow: hidden;
    height: 209px;
    border: 1px solid #e4e4e4;
    border-top: 0;
}

/* 将ul设置的足够宽 为的是让 li能显示全 */
.lifeservice ul {
    width: 252px;
}

.lifeservice ul li {
    float: left;
    width: 63px;
    height: 71px;
    border-right: 1px solid #e4e4e4;
    border-bottom:  1px solid #e4e4e4;
    text-align: center;

}

.lifeservice ul li i {
    /* 行内元素i 不能设置宽高 需转成行内块元素 才能设置宽高 */
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-top: 12px;
    background: url(../images/icons.png) no-repeat;
    margin-bottom: 5px;
}

.bargain {
    margin-top: 8px;
}

/* 推荐模块 */
.recommand {
    height: 163px;
    background-color: #e4e4e4;
    margin-top: 12px;
}

.recommand_hd {
    float: left;
    width: 203px;
    height: 163px;
    background-color: #5c5251;
    text-align: center;
    padding-top: 30px;
}

.recommand_bd {
    float: left;
}

.recommand_bd ul li {
    position: relative;
    float: left;
}

.recommand_bd ul li:nth-child(-n+3):after {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

/* 楼层模块 家电 */
.floor .w {
    margin-top: 30px;
}

.box_hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
}

.box_hd h3 {
    float: left;
    font-size: 18px;
    color: #c81623;
    font-weight: 400;
}

.tab_list {
    float: right;
    line-height: 30px;
}

.tab_list ul li {
    float: left;
}

.tab_list ul li a {
    margin: 0 15px;
}

.box_bd {
    height: 361px;
    background-color: pink;
}

.tab_list_item>div{
    float: left;
}

.col_210 {
    width: 210px;
    background-color: #f9f9f9;
    height: 361px;
    text-align: center;
}

.col_210 ul {
    padding-left: 12px;
}
 
.col_210 ul li {
    float: left;
    width: 85px;
    height: 34px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 34px;
    margin-right: 12px;
}

.col_210 a img {
    margin-top: 10px;
}

.col_329 {
    width: 329px;
    height: 361px;
    text-align: center;
}

.col_329 a img {
    width: 100%;
    height: 100%;
}

.col_221 {
    width: 221px;
    height: 361px;
    border-right: 1px solid #ccc;
}

.col_221 a img {
    width: 100%;
    height: 100%;
}

.col_219 {
    width: 219px;
    height: 361px;
}

.col_219 a img {
    width: 100%;
    height: 100%;
}
  • index.css文件代码：
<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <meta name="description"
        content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
    <meta name="keywords" content="品购物商城,销售家电,数码通讯,电脑,家居百货,服饰,母婴,图书">

    <!-- 引入favicon图标-->
    <link rel="shortcut icon" href="pyg.ico">

    <!--  引入初始化样式文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共的样式文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 首页专有的样式文件 -->
    <link rel="stylesheet" href="css/index.css">

</head>

<body>
    <!-- 快捷导航 shortcut -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您! &nbsp;</li>
                    <li>
                        <a href="#">请登录 &nbsp;</a>
                        <a href="#" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow_icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow_icon">关注品优购</li>
                    <li></li>
                    <li class="arrow_icon">客户服务</li>
                    <li></li>
                    <li class="arrow_icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- header部分 -->
    <header class="header w">
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
        </div>

        <div class="hotwords">
            <a href="#" class="style_red">优惠购首发</a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">美满99减30 </a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>

        <div class="shopcar">
            我的购物车
            <i class="count">8</i>
        </div>

    </header>

    <!-- nav模块 -->
    <nav class="nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="#">手机</a> <a href="#">数码</a> <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>
                        <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>
            <div class="navitems">
                <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>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 首页专有模块 -->
    <div class="w">
        <div class="main">
            <div class="foucs">
                <ul>
                    <li><img src="upload/foucs.png" alt=""></li>
                </ul>
            </div>
            <div class="newflash">
                <div class="news">
                    <div class="news_hd">
                        <h5>品优购快报</h5>
                        <a href="#" class="more">更多</a>
                    </div>
                    <div class="news_bd">
                        <ul>
                            <li><a href="#"><strong>[重磅]</strong>它来了它来了，pink老师走来了啊,我是绝顶大神</a></li>
                            <li><a href="#"><strong>[重磅]</strong>它来了它来了，pink老师走来了啊</a></li>
                            <li><a href="#"><strong>[重磅]</strong>它来了它来了，pink老师走来了啊</a></li>
                            <li><a href="#"><strong>[重磅]</strong>它来了它来了，pink老师走来了啊</a></li>
                            <li><a href="#"><strong>[重磅]</strong>它来了它来了，pink老师走来了啊我是绝顶大神</a></li>
                        </ul>
                    </div>
                </div>
                <div class="lifeservice">
                    <ul>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                    </ul>
                </div>
                <div class="bargain">
                    <img src="upload/bargain.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- 推荐模块 -->
    <div class="w recommand">
        <div class="recommand_hd">
            <img src="images/recommand.png" alt="">
        </div>
        <div class="recommand_bd">
            <ul>
                <li><img src="images/recommand01.png" alt=""></li>
                <li><img src="images/recommand01.png" alt=""></li>
                <li><img src="images/recommand01.png" alt=""></li>
                <li><img src="images/recommand01.png" alt=""></li>
            </ul>
        </div>
    </div>

    <!-- 楼层模块 -->
    <div class="floor">
        <div class="w jiadian">
            <div class="box_hd">
                <h3>家用电器</h3>
                <div class="tab_list">
                    <ul>
                        <li><a href="#" class="style_red">热门</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>
            <div class="box_bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <div class="col_210">
                            <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>
                            </ul>
                            <a href="#">
                                <img src="upload/floor01.png" alt="">
                            </a>

                        </div>
                        <div class="col_329">
                            <a href="">
                                <img src="upload/floor02.png" alt="">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="">
                                <img src="upload/floor3.png" alt="">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="">
                                <img src="upload/floor4.png" alt="">
                            </a>
                        </div>
                        <div class="col_219">
                            <a href="">
                                <img src="upload/floor5.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w shouji">
            <div class="box_hd">
                <h3>手机通讯</h3>
                <div class="tab_list">
                    <ul>
                        <li><a href="#" class="style_red">热门</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>
            <div class="box_bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <div class="col_210">
                            <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>
                            </ul>
                            <a href="#">
                                <img src="upload/floor01.png" alt="">
                            </a>

                        </div>
                        <div class="col_329">
                            <a href="">
                                <img src="upload/floor02.png" alt="">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="">
                                <img src="upload/floor3.png" alt="">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="">
                                <img src="upload/floor4.png" alt="">
                            </a>
                        </div>
                        <div class="col_219">
                            <a href="">
                                <img src="upload/floor5.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- footer模块 -->
    <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发展</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发展</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发展</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发展</p>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="mod_help">
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="images/pyg_code.png" alt="">
                        品优购客户端
                    </dd>

                </dl>
            </div>
            <div class="mode_copyright">
                <div class="links">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site
                    | Contact U</div>
                <div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:
                    zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702</div>
            </div>
        </div>
    </footer>
</body>

</html>
  • 运行效果图如下：
image.png

相关文章

网友评论

      本文标题：前端入门06 -- HTML5和CSS3提高，项目实战

      本文链接：https://www.haomeiwen.com/subject/tfuxqrtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|前端入门06 -- HTML5和CSS3提高，项目实战|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！