（新手制作，高手勿进） CSS样式制作网页心得

最新推荐文章于 2023-10-25 18:05:59 发布

CY-刘大大

最新推荐文章于 2023-10-25 18:05:59 发布

阅读量391

点赞数

本文链接：https://blog.csdn.net/qq_48574360/article/details/116399601

版权

一、什么是CSS?

CSS指的是层叠样式表（Cascading Style Sheets）
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

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>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .all{
            width: 1000px;
            height: 704px;
            margin: 0 auto;
            background-color: bisque;
        }
        .top{
            width: 1003px;
            height: 100px;
            background-color: brown;
            border: 1px solid black;
        }
        .content{
            width: 1005px;
            height: 500px;
            background-color: cadetblue;
            
        }
        .content .one{
            width: 250px;
            height: 100%;
            background-color: chartreuse;
            float: left;
            border-left: 1px solid black;
        }
        .content .two{
            width: 500px;
            height: 100%;
            background-color: chocolate;
            float: left;
            border-left: 1px solid black;
        }
        .content .three{
            width: 250px;
            height: 100%;
            background-color: cornflowerblue;
            float: left;
            border-left: 1px solid black;
            border-right: 1px solid black;
        }
        .bottom{
            width: 1003px;
            height: 100px;
            background-color: cyan;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="top">top</div>
        <div class="content">
            <div class="one">content-one</div>
            <div class="two">content-two</div>
            <div class="three">content-three</div>
        </div>
        
        <div class="bottom">bottom</div>
    </div>
</body>
</html>

在这里插入图片描述

二、在制作网页时常用的属性

1、外边距(margin)

margin-top 上边距
margin-right 右边距
margin-bottom 下边距
margin-left 左边距

单独设置一个margin时默认顺序为上右下左

margin: 10px;上右下左
margin: 10px 10px;上下、左右
margin: 10px 10px 10px;上、左右、下
margin: 10px 10px 10px 10px;上、右、下、左
margin: 0 auto;设置水平居中

2、内边距(padding)
用法和内边距相似top、right、bottom、left

3、边框(border)

border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框

border: 1px solid black;
里面的值没有固定顺序，第一个值设置边框的大小，第二个值设置边框为实线边框，第三个值设置颜色。边框样式常用的有实线(solid)、虚线(dashed)。

4、圆角(border-radius)

border-radius: 5px;上右下左
border-radius: 5px 10px;上下、左右
border-radius: 5px 10px 15px;上、左右、下
border-radius: 5px 10px 15px 20px;上、右、下、左

5、浮动(float)

float: none;不浮动
float: left;左浮动
float: right;右浮动

设置浮动通常对块元素设置，在制作网页时会经常用到浮动

浮动前
在这里插入图片描述
浮动后

6、定位(position)

static 静态布局
absolute 绝对布局一般给里面嵌套的元素使用
relative 相对布局一般给父级元素去使用

在设置网页时定位会比较少用，使用定位时一般要指定父元素，否则修改页面时会一直去调整定位元素的位置，会比较麻烦。

7、文本控制

文本水平对齐方式：text-align: left(左对齐)center(居中对齐)right(右对齐)
文本垂直对齐方式：vertical-align：sub[设置文字为下标] super[设置文字为上标]top[把元素的顶端与行中最高元素的顶端对齐]text-botton[把元素的低端与父元素字体的低端对齐]

通常使用line-height：属性值；设置属性值和父元素的高度一样就会使文本垂直对齐。

8、背景

背景颜色 background-color: 属性值;属性值可以为颜色的英文单词，rgb(红0-255，绿0-255，蓝0-255)，rgba(红0-255，绿0-255，蓝0-255，透明度0-1)
背景图像 background-image: url（背景图像的位置及全称）

9、超链接(a)

text-decoration: none;去掉下划线

10、伪类

未访问链接：a:link{color:#ff0000}
已访问的链接：a:visited{color:#00ff00}
鼠标移动到链接上：a:hover{color:#ff00ff}（比较常用）
鼠标按下到链接上：a:active{color:#0000ff}

三、案例(新手制作，勿喜勿喷)

<!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="stylesheet" href="./css/reset.css">
    <style>
        .clearfix::after,
        .clearfix::before {
            content: '';
            display: table;
            clear: both;
        }

        .all {
            width: 1519.2px;
            height: 2225px;
        }
        /* 设置导航栏 */
        .all .nav {
            width: 1519.2px;
            height: 70px;
            background-color: #333333;
        }
        /* 设置logo */
        .nav .nav-logo {
            width: 240px;
            height: 70px;
            float: left;
            margin-left: 111px;
        }
        .nav .nav-content {
            width: 797.2px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            margin-left: 723px;
        }
        .nav .nav-content li {
            float: left;
        }
        .nav .nav-content li a {
            padding: 25px 40px;
            text-decoration: none;
            color: white;
        }
        .nav-content li.nav-content-one a {
            background-color: #000000;
        }
        .nav .nav-content li a:hover {
            background-color: #000000;
        }
        /* 设置图片背景 */
        .all .img {
            width: 100%;
            height: 300px;
            background: url(./飘城旅行社图片/headline1.jpg);
        }
        .img .img-one {
            width: 100%;
            height: 300px;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .img-one h1 {
            font-size: 35px;
            font-weight: bold;
            color: white;
            margin-top: 103px;
            margin-left: 149px;
            letter-spacing: 2px;
        }
        .img-one p {
            font-size: 19px;
            color: white;
            font-weight: bold;
            margin-top: 12px;
            margin-left: 149px;
            letter-spacing: 2px;
        }
        /* 设置主体 */
        .main {
            width: 100%;
            height: 1243px;
        }
        /* 主体左边 */
        .main .main-left {
            width: 877px;
            height: 1243px;
            float: left;
            margin-left: 148px;
        }
        .main .main-left h2 {
            width: 875px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            margin-top: 12px;
            color: rgb(92, 90, 90);
            border-bottom: 1px dashed black;
        }
        .main-left .left-div-one {
            width: 875px;
            height: 180px;
            font-size: 20px;
            margin-top: 20px;
            color: #666666;
        }
        .main-left .left-div-one p span {
            color: white;
            background-color: #458B00;
            padding: 5px 8px;
            border-radius: 4px;
            margin: 0 10px 0 15px;
        }
        .left-div-one ul {
            width: 686px;
            height: 39px;
            margin-top: 20px;
            float: left;
        }
        .left-div-one .flight:nth-child(3) {
            margin-top: 35px;
        }
        .left-div-one .flight input {
            width: 221px;
            height: 35px;
            font-size: 17px;
            border-radius: 4px;
            border: 1px solid #CCCCCC;
        }
        .left-div-one .flight li {
            float: left;
        }
        .left-div-one .flight li.flight-two {
            margin-left: 30px;
        }
        .flight li input {
            margin-left: 15px;
        }
        .left-div-one .book-the-ticket {
            float: left;
            display: block;
            width: 100px;
            height: 100px;
            color: white;
            background-color: #FF6600;
            margin-left: 46px;
            line-height: 100px;
            text-align: center;
            border-radius: 5px;
        }
        .main-left .left-div-two {
            margin-top: 30px;
        }
        .left-div-two .city {
            width: 875px;
            height: 51px;
        }
        .left-div-two .city li {
            float: left;
            font-size: 20px;
            color: #666666;
        }
        .left-div-two .city li:nth-child(1) {
            margin-right: 25px;
        }
        .left-div-two .city li a:first-child {
            text-decoration: none;
            color: #666666;
        }
        .left-div-two .city li span.city-one {
            padding: 5px 12px;
            border-radius: 4px;
            color: white;
            background-color: #458B00;
        }
        .left-div-two .city li span {
            padding: 5px 12px;
            border-radius: 4px;
        }
        .left-div-two .city li span:hover {
            padding: 5px 12px;
            border-radius: 4px;
            color: white;
            background-color: #458B00;
        }
        .left-div-two .title {
            width: 873px;
            height: 52.6px;
            line-height: 50px;
            border: 1px solid #6b6161;
        }
        .left-div-two .title li {
            float: left;
            font-size: 20px;
            font-weight: bold;
        }
        .left-div-two .title li:nth-child(1) {
            margin-left: 74px;
        }
        .title li:nth-child(2) {
            margin-left: 108px;
        }
        .title li:nth-child(3),
        .title li:nth-child(4) {
            margin-left: 58px;
        }
        .title li:nth-child(5) {
            margin-left: 45px;
        }
        .title li:nth-child(6) {
            margin-left: 82px;
        }
        .title li:nth-child(7) {
            margin-left: 116px;
        }
        .left-div-two .reserve {
            width: 875px;
            height: 482px;
            line-height: 50px;
        }
        .left-div-two .reserve li {
            width: 823px;
            height: 52.6px;
            font-size: 20px;
            color: #666666;
            padding-left: 50px;
            border: 1px solid #DDDDDD;
            border-top: none;
        }
        .left-div-two .reserve li:nth-child(2),
        .left-div-two .reserve li:nth-child(4),
        .left-div-two .reserve li:nth-child(6),
        .left-div-two .reserve li:nth-child(8) {
            background-color: #FAFAFA;
        }
        .reserve li span:nth-child(2),
        .reserve li span:nth-child(6),
        .reserve li a {
            margin-left: 70px;
        }
        .reserve li span:nth-child(3),
        .reserve li span:nth-child(4),
        .reserve li span:nth-child(5) {
            margin-left: 45px;
        }
        .reserve li span:nth-child(3) {
            color: #FF6600;
        }
        .reserve li a {
            padding: 5px 20px;
            color: white;
            background-color: #FF6600;
            border-radius: 5px;
            text-decoration: none;
        }
        .left-div-two .more {
            width: 873px;
            height: 52.6px;
            border: 1px solid #DDDDDD;
            border-top: none;
            text-align: center;
            font-size: 20px;
            line-height: 51.6px;
        }
        .left-div-two .more a {
            color: #666666;
            text-decoration: none;
        }
        /* 主体右边 */
        .main .main-right {
            width: 330px;
            height: 1213px;
            float: left;
            margin-left: 15px;
            margin-top: 30px;
        }
        .main-right .right-top {
            width: 328px;
            height: 312px;
            border: 1px solid #EFEFEF;
        }
        .main-right .right-top p {
            width: 318px;
            height: 42px;
            line-height: 42px;
            font-size: 18px;
            padding-left: 10px;
            color: #696A6C;
            background-color: #FAFAFA;
        }
        .right-top ul.ul-one {
            width: 312px;
            height: 30px;
            margin-left: 18px;
            margin-top: 15px;
        }
        .right-top ul {
            width: 312px;
            height: 30px;
            margin-left: 18px;
            margin-top: 5px;
        }
        .right-top li {
            float: left;
        }
        .right-top li a {
            text-decoration: none;
            color: #A8A8A8;
        }
        .right-top li span {
            display: block;
            width: 84px;
            height: 30px;
            font-size: 15px;
            line-height: 30px;
            margin-left: 5px;
            padding-left: 7px;
            background-color: #EEEEEE;
        }
        .main-right .right-content {
            width: 328px;
            height: 675px;
            border: 1px solid #EFEFEF;
            margin-top: 10px;
        }
        .main-right .right-content p {
            width: 318px;
            height: 42px;
            line-height: 42px;
            font-size: 18px;
            padding-left: 10px;
            color: #696A6C;
            background-color: #FAFAFA;
        }
        .right-content ul {
            width: 328px;
            height: 620px;
        }
        .right-content li {
            width: 150px;
            height: 145px;
            margin-top: 10px;
            margin-left: 9.5px;
            float: left;
        }
        .right-content ul li span {
            display: block;
            text-align: center;
            line-height: 20px;
        }
        .right-content ul li a {
            text-decoration: none;
            color: #6d6a6a;
        }
        .main-right .right-bottom {
            width: 328px;
            height: 148px;
            border: 1px solid #EFEFEF;
            margin-top: 10px;
        }
        .main-right .right-bottom p {
            width: 318px;
            height: 42px;
            line-height: 42px;
            font-size: 18px;
            padding-left: 10px;
            color: #696A6C;
            background-color: #FAFAFA;
        }
        .right-bottom ul {
            width: 318px;
            height: 83px;
            margin-top: 10px;
            margin-left: 10px;
        }
        .right-bottom li {
            width: 145px;
            height: 36px;
            margin-top: 5px;
            margin-left: 7px;
            background-color: #EEEEEE;
            float: left;
        }
        .right-bottom li a {
            text-decoration: none;
            color: #C0C0C0;
        }
        .right-bottom li img {
            float: left;
            margin-top: 8px;
            margin-left: 10px;
        }
        .right-bottom li span {
            line-height: 36px;
            margin-left: 7px;
        }
        /* 设置底部 */
        .footer {
            width: 100%;
            height: 300px;
            background-color: #222222;
        }
        .footer .footer-one {
            width: 100%;
            height: 67px;
        }
        .footer .footer-one li {
            color: #B9C7CA;
            font-size: 25px;
            float: left;
            margin-top: 30px;
            padding-right: 264px;
            padding-bottom: 10px;
            border-bottom: 2px #333333 dashed;
        }
        .footer .footer-one li:nth-child(1) {
            margin-left: 164px;
        }
        .footer .footer-one li:nth-child(2),
        .footer .footer-one li:nth-child(3) {
            margin-left: 57px;
        }
        .footer .footer-two,
        .footer .footer-three,
        .footer .footer-four {
            width: 366px;
            height: 223px;
            margin-top: 10px;
            line-height: 35px;
            float: left;
        }
        .footer .footer-two li a,
        .footer .footer-three li a,
        .footer .footer-four li a {
            text-decoration: none;
            color: #605F60;
        }
        .footer .footer-two {
            margin-left: 164px;
        }
        .footer .footer-three,
        .footer .footer-four {
            margin-left: 57px;
        }
        /* 设置底部 */
        .bottom {
            width: 100%;
            height: 78px;
            background-color: black;
        }
        .bottom p {
            color: #B9C7CA;
            text-align: center;
            line-height: 78px;
        }
    </style>
</head>

<body>
    <div class="all">
        <!-- 设置导航栏 -->
        <div class="nav">
            <!-- 设置logo -->
            <div class="nav-logo">
                <img src="./飘城旅行社图片/logo.png" alt="飘城旅行社">
            </div>
            <ul class="nav-content">
                <li><a href="./15_飘城旅行社.html">&nbsp;&nbsp;首页&nbsp;&nbsp;</a></li>
                <li><a href="./16_旅游资讯.html">旅游资讯</a></li>
                <li class="nav-content-one"><a href="./17_机票订购.html">机票订购</a></li>
                <li><a href="./18_风景欣赏.html">风景欣赏</a></li>
                <li><a href="./19_公司简介.html">公司简介</a></li>
            </ul>
        </div>

        <!-- 设置图片背景 -->
        <div class="img">
            <div class="img-one clearfix">
                <h1>旅游资讯</h1>
                <p>介绍各种最新旅游信息、资讯要闻、景点攻略等</p>
            </div>

        </div>


        <!-- 设置主体 -->
        <div class="main">
            <div class="main-left clearfix">
                <h2>机票预定</h2>
                <div class="left-div-one">
                    <p>航班类型 <span>单程</span> 往返</p>
                    <ul class="flight">
                        <li class="flight-one">出发城市
                            <input type="text" placeholder="城市名">
                        </li>
                        <li class="flight-two">出发时间
                            <input type="text" placeholder="时间/日期">
                        </li>
                    </ul>
                    <ul class="flight">
                        <li class="flight-one">返回城市
                            <input type="text" placeholder="城市名">
                        </li>
                        <li class="flight-two">返回时间
                            <input type="text" placeholder="时间/日期">
                        </li>
                    </ul>
                    <a href="javascript:;"><span class="book-the-ticket">订票</span></a>
                </div>
                <h2>最新机票</h2>
                <div class="left-div-two">
                    <ul class="city">
                        <li>热门城市 : </li>
                        <li><a href="javascript:;"><span class="city-one">北京</span></a></li>
                        <li><a href="javascript:;"><span>上海</span></a></li>
                        <li><a href="javascript:;"><span>广州</span></a></li>
                        <li><a href="javascript:;"><span>深圳</span></a></li>
                        <li><a href="javascript:;"><span>重庆</span></a></li>
                        <li><a href="javascript:;"><span>成都</span></a></li>
                        <li><a href="javascript:;"><span>杭州</span></a></li>
                        <li><a href="javascript:;"><span>南京</span></a></li>
                    </ul>
                    <ul class="title">
                        <li>路线</li>
                        <li>日期</li>
                        <li>价格</li>
                        <li>税费</li>
                        <li>餐食</li>
                        <li>航班</li>
                        <li>预定</li>
                    </ul>
                    <ul class="reserve">
                        <li>
                            <span>北京-成都</span>
                            <span>10-15</span>
                            <span>&yen;745</span>
                            <span>&yen;50</span>
                            <span>&nbsp;有 </span>
                            <span>春秋航空</span>
                            <a href="javascript:;"><span>预定</span></a>
                        </li>
                        <li>
                            <span>北京-上海</span>
                            <span>10-15</span>
                            <span>&yen;479</span>
                            <span>&yen;49</span>
                            <span>&nbsp;无 </span>
                            <span>南方航空</span>
                            <a href="javascript:;"><span>预定</span></a>
                        </li>
                        <li>
                            <span>北京-深圳</span>
                            <span>10-15</span>
                            <span>&yen;561</span>
                            <span>&yen;52</span>
                            <span>&nbsp;有 </span>
                            <span>西部航空</span>
                            <a href="javascript:;"><span>预定</span></a>
                        </li>
                        <li>
                            <span>北京-杭州</span>
                            <span>10-15</span>
                            <span>&yen;378</span>
                            <span>&yen;36</span>
                            <span>&nbsp;无 </span>
                            <span>春秋航空</span>
                            <a href="javascript:;"><span>预定</span></a>
                        </li>
                        <li>
                            <span>北京-广州</span>
                            <span>10-15</span>
                            <span>&yen;612</span>
                            <span>&yen;44</span>
                            <span>&nbsp;有 </span>
                            <span>春秋航空</span>
                            <a href="javascript:;"><span>预定</span></a>
                        </li>
                        <li>
                            <span>北京-重庆</span>
                            <span>10-15</span>
                            <span>&yen;428</span>
                            <span>&yen;62</span>
                            <span>&nbsp;有 </span>
                            <span>春秋航空</span>
                            <a href="javascript:;"><span>预定</span></a>
                        </li>
                        <li>
                            <span>北京-昆明</span>
                            <span>10-15</span>
                            <span>&yen;509</span>
                            <span>&yen;35</span>
                            <span>&nbsp;无 </span>
                            <span>春秋航空</span>
                            <a href="javascript:;"><span>预定</span></a>
                        </li>
                        <li>
                            <span>北京-厦门</span>
                            <span>10-15</span>
                            <span>&yen;893</span>
                            <span>&yen;73</span>
                            <span>&nbsp;有 </span>
                            <span>春秋航空</span>
                            <a href="javascript:;"><span>预定</span></a>
                        </li>
                        <li>
                            <span>北京-长沙</span>
                            <span>10-15</span>
                            <span>&yen;663</span>
                            <span>&yen;46</span>
                            <span>&nbsp;无 </span>
                            <span>春秋航空</span>
                            <a href="javascript:;"><span>预定</span></a>
                        </li>
                    </ul>
                    <div class="more">
                        <a href="javascript:;">加载更多航班...</a>
                    </div>
                </div>
            </div>



            <div class="main-right">
                <div class="right-top">
                    <p>景点推荐</p>
                    <ul class="ul-one">
                        <li><a href="javascript:;"><span>曼谷(12)</span></a></li>
                        <li><a href="javascript:;"><span>东京(5)</span></a></li>
                        <li><a href="javascript:;"><span>西双版纳(8)</span></a></li>
                    </ul>
                    <ul>
                        <li><a href="javascript:;"><span>漓江(16)</span></a></li>
                        <li><a href="javascript:;"><span>呼伦贝尔(4)</span></a></li>
                        <li><a href="javascript:;"><span>首尔(9)</span></a></li>
                    </ul>
                    <ul>
                        <li><a href="javascript:;"><span>巴厘岛(15)</span></a></li>
                        <li><a href="javascript:;"><span>土耳其(22)</span></a></li>
                        <li><a href="javascript:;"><span>夏威夷(5)</span></a></li>
                    </ul>
                    <ul>
                        <li><a href="javascript:;"><span>巴厘岛(11)</span></a></li>
                        <li><a href="javascript:;"><span>毛里求斯(7)</span></a></li>
                        <li><a href="javascript:;"><span>吉普岛(4)</span></a></li>
                    </ul>
                    <ul>
                        <li><a href="javascript:;"><span>希腊(18)</span></a></li>
                        <li><a href="javascript:;"><span>法瑞意(8)</span></a></li>
                        <li><a href="javascript:;"><span>马尔代夫(9)</span></a></li>
                    </ul>
                    <ul>
                        <li><a href="javascript:;"><span>新西兰(16)</span></a></li>
                        <li><a href="javascript:;"><span>埃及(11)</span></a></li>
                        <li><a href="javascript:;"><span>迪拜(14)</span></a></li>
                    </ul>
                    <ul>
                        <li><a href="javascript:;"><span>斯里兰卡(7)</span></a></li>
                        <li><a href="javascript:;"><span>麦哈顿(3)</span></a></li>
                        <li><a href="javascript:;"><span>大阪(15)</span</a></li>
                    </ul>
                </div>
                <div class="right-content">
                    <p>热门旅游</p>
                    <ul>
                        <li>
                            <a href="javascript:;"><img src="./飘城旅行社图片/hot1.jpg"><span>曼谷-芭提雅6日游</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="./飘城旅行社图片/hot2.jpg"><span>马尔代夫双鱼6日游</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="./飘城旅行社图片/hot3.jpg"><span>海南双飞5日游</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="./飘城旅行社图片/hot4.jpg"><span>富山大阪东京8日游</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="./飘城旅行社图片/hot5.jpg"><span>法瑞意德12日游</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="./飘城旅行社图片/hot6.jpg"><span>巴厘岛6日半游</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="./飘城旅行社图片/hot7.jpg"><span>塞舌尔迪拜9日游</span></a>
                        </li>
                        <li class="content-one">
                            <a href="javascript:;"><img src="./飘城旅行社图片/hot8.jpg"><span>花样土耳其10日游</span></a>
                        </li>
                    </ul>
                </div>
                <div class="right-bottom">
                    <p>旅游百宝箱</p>
                    <ul>
                        <li><a href="javascript:;"><img src="./飘城旅行社图片/trea1.png"><span>天气预报</span></a></li>
                        <li><a href="javascript:;"><img src="./飘城旅行社图片/trea2.png"><span>火车票查询</span></a></li>
                        <li><img src="./飘城旅行社图片/trea3.png"><a href="javascript:;"><span>航空查询</span></a></li>
                        <li><a href="javascript:;"><img src="./飘城旅行社图片/trea4.png"><span>地铁线路查询</span></a></li>
                    </ul>
                </div>

            </div>
        </div>

        <!-- 设置底部 -->
        <div class="footer">
            <ul class="footer-one">
                <li>合作伙伴</li>
                <li>旅游FAQ</li>
                <li>联系方式</li>
            </ul>
            <ul class="footer-two">
                <li><a href="javascript:;">途游旅游网</a></li>
                <li><a href="javascript:;">驴妈妈旅游网</a></li>
                <li><a href="javascript:;">携程旅游</a></li>
                <li><a href="javascript:;">中国青年旅行社</a></li>
            </ul>
            <ul class="footer-three">
                <li><a href="javascript:;">旅游合同签订方式?</a></li>
                <li><a href="javascript:;">儿童价是基于什么定制的?</a></li>
                <li><a href="javascript:;">旅游的线路品质怎么界定的?</a></li>
                <li><a href="javascript:;">单房差是什么?</a></li>
                <li><a href="javascript:;">旅游保险有哪些种类?</a></li>
            </ul>
            <ul class="footer-four">
                <li><a href="javascript:;">微博: weibo.com/ycku</a></li>
                <li><a href="javascript:;">邮件: ycku@ycku.com</a></li>
                <li><a href="javascript:;">地址: 江苏盐城无名路123号</a></li>
            </ul>
        </div>
        <div class="bottom">
            <p>Copyright &copy; YCKU 飘城旅行社|苏ICP 备120110119 号|旅行社经营许可证: L-YC-BK12345</p>

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

</html>

在这里插入图片描述

四、总结

在制作网页时会要设置一个尽量设置块元素的宽度和高度，每个父元素的高度和宽度都要比较精准，必须包含住里面的所有子元素，这样设置样式是才会对其它元素的影响比较小。看到一些排列比较比较整洁的元素时会先使用列表标签制作，这些列表都有一些默认样式，引入了一个外部链表来清除这些默认样式。制作网页时得有耐心慢慢调整，先要质量在提高速度。以上的属性在我制作网页时会比较常用，就是通过这些属性慢慢调整成自己想要的样子，在制作过程中用的都是一些比较死板的东西慢慢调整，有许多比较简便的方式也许未用到，所以代码比较多，有许多可以简洁的代码需要自己慢慢去调。

清除默认样式链接：http://meyerweb.com/eric/tools/css/reset/先新建一个文件夹reset.css 后缀名为.css 将链接里面的代码复制进去，在制作网页需要清除默认样式时可以使用link引入。

CY-刘大大

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（新手制作，高手勿进） CSS样式制作网页心得

一、什么是CSS?CSS指的是层叠样式表（Cascading Style Sheets）CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中CSS中常使用盒子模型布局，把网页分成一块一块的，在制作网页时会清楚知道在哪个块里做什么样式。盒子模型<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫