网页制作之HTML+CSS布局

忘是亡心i 2022-04-15 01:05 298阅读 0赞

## **CSS网页布局：** ##

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

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

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

## 元素基本样式： ##

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

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

2.内嵌样式 ：写在<head>部分，用<style></style>标签包起来

<!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的<head>部分用<link>标签链接，注意地址一定要写正确，否则链接无效。

<!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>

元素的样式可以混合使用

## 图片标签 ##

图像标签是自闭和标签，写法<img src=" ">

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

## 定位 ##

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

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

3.固定定位

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

## 搜索框 ##

直接用标签<input type=" ">表示

## 悬停伪类 ##

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

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

![20181121113542953.png][]

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;
    }

需要注意的是，在保存文件的时候要注意路径是否一致，否则图片加载不出来，或者会出现样式混乱的情况。

[20181121113542953.png]: /images/20220415/1304e8a6fa7146bf8e67433e7743adfb.png