网页制作之HTML+CSS布局-蒲公英云

CSS网页布局：

可以分为三种：1.固定布局

2.流动布局（是百分百布局）

3.弹性布局（可用于移动APP开发）

元素基本样式：

1.行内样式：直接写在部分的标签里面

<body> 
     <span><a href="#" style="color: red">每满千减百</a></span>
</body>
</html>

2.内嵌样式：写在部分，用标签包起来

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>淘宝</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: auto;
            width: 1000px;
            height: 500px;
            border: 1px solid #355162;
        }
     </style>

3.外部样式:是在CSS写入样式，在html的部分用标签链接，注意地址一定要写正确，否则链接无效。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="./css/iconfont.css">
</head>

元素的样式可以混合使用

图片标签

图像标签是自闭和标签，写法

图像标签的实现路径有三种：1.相对路径 2.绝对路径 3.远程路径

定位

定位分为三种：1.相对定位（占位置）

                        2.绝对定位（不占位置）
                        3.固定定位

相对定位和绝对定位使用较多，并且两者可以混合使用，一般是将绝对定位套进相对定位中使用，即给父元素使用相对定位，给子元素使用绝对定位。

搜索框

直接用标签表示

悬停伪类

用属性：hover表示，当鼠标放置需要悬停的文字或图片上时，会显示出所设置的属性样式，如字体颜色，子集，背景色等等

这里我们以固定布局，外部样式为例，以京东部分网页为模板来展示

html部分展示如下

<div class="two">
    <div class="img"><img src="./img/5b5edd7eNc217df1c.gif"></div>
    <div class="two_center">
        <div class="two_center1">
            <input type="text"/>
           <span class="two_center11"><i class="iconfont">&#xf0151</i></span>
           <span class="two_center12"><i class="iconfont">&#xf012c</i></span>
        </div>
        <div class="two_center2">
            <span><a href="#" style="color: red">每满千减百</a></span>
            <span><a href="#">坚果零食</a></span>
            <span><a href="#">0元试用</a></span>
            <span><a href="#">1元秒杀</a></span>
            <span><a href="#">每100-40</a></span>
            <span><a href="#">一加6T</a></span>
            <span><a href="#">空调好物</a></span>
            <span><a href="#">家装建材</a></span>
            <span><a href="#">组装电脑</a></span>
        </div>
        <div class="two_right">
            <i class="iconfont">&#xf0179</i>
            我的购物车
            <span class="shuzi">0</span>
        </div>
    </div>
    <div class="two_center3">
        <span><a href="#">秒杀</a></span>
        <span><a href="#">优惠券</a></span>
        <span><a href="#">PLUS会员</a></span>
        <span><a href="#">闪购</a></span>
        <span class="shuxian"></span>
        <span><a href="#">拍卖</a></span>
        <span><a href="#">京东时尚</a></span>
        <span><a href="#">京东超市</a></span>
        <span><a href="#">京东生鲜</a></span>
        <span class="shuxian"></span>
        <span><a href="#">全球购</a></span>
        <span><a href="#">京东金融</a></span>
    </div>
</div>

CSS部分

.two{
    position: relative;
    width: 1190px;
    height: 140px;
    margin: 0 auto;
}
.img{
    position: absolute;
    margin-top: -60px;
    width: 190px;
    height: 170px;
    background-color: white;
    background-size: 190px 170px;
    box-shadow: 0px -5px 15px silver;
    border-bottom: 1px solid silver;
}
.two_center{
    position: relative;
    margin-left: 320px;
    margin-top: 30px;
    width: 550px;
    height: 60px;
}
.two_center1{
    position: absolute;
    width: 550px;
    height: 35px;
    background-color: white;
}
.two_center1>input{
    width: 450px;
    height: 35px;
    outline: none;
    border-style: none;
    padding-left: 5px;
}
.two_center11{
    position: absolute;
    width: 40px;
    height: 35px;
    right: 60px;
    text-align: center;
    line-height: 35px;
}
.two_center11>i{
    font-size: 25px;
    color: #696969;
}
.two_center11>i:hover{
    color: red;
}
.two_center12{
    position: absolute;
    right: 0;
    width: 60px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background-color: #ff0000;
}
.two_center12>i{
    font-size: 25px;
    color: white;
}
.two_center2{
    display: inline-block;
    margin-top: 35px ;
    width: 550px;
    height: 25px;
}
.two_center2>span{
    margin-right: 6px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
}
.two_center2>span>a{
    text-decoration: none;
    color: #ababab;
}
.two_center2>span>a:hover{
    color: red;
}
.two_center3{
    margin-top: 30px;
    margin-left: 230px;
}
.two_center3>span {
    padding-right: 20px;
    font-size: 14px;
}
.two_center3>span a{
    text-decoration: none;
    color: black;
}
.two_center3>span a:hover{
    color: red;
}
.shuxian{
    display: inline-block;
    height: 10px;
    width: 1px;
    border-left: 1px solid #9b9b9b;
}
.two_right{
    position: absolute;
    margin-left: 580px;
    top: 0px;
    left: 0px;
    z-index: 10;
    width: 188px;
    height: 33px;
    border: 1px solid silver;
    background-color: white;
    text-align: center;
    line-height: 33px;
    font-size: 13px;
    color: #ff426f;
}
.two_right>i{
    font-size: 18px;
    margin-left: 5px;
}
.shuzi{
    position: relative;
    display: inline-block;
    top: -8px;
    width: 12px;
    height: 15px;
    border-radius: 50%;
    color: white;
    background-color: red;
    line-height: 15px;
    text-align: center;
}