2019.6.22 Web全栈开发学习笔记（三）-CSDN博客

本文链接：https://blog.csdn.net/weixin_44363959/article/details/96431272

Day 3

这次讲的内容不多，但已经把CSS最基本的内容学完了，所以通过这些内容，我们可以制作一个简单的网页，代码会附在文章最后。

课程内容

一、选择器

1. 后代选择器
作用为使某一祖先元素的所有后代元素拥有某些属性，格式为：祖先元素后代元素{}
例如：

ul li{
            list-style: none;
        }

表示祖先元素ul下的所有li后代元素的列表样式均为none

2. 集合选择器
作用为使某一集合内所有元素拥有某些属性，格式为：元素a，元素b，元素c{}
例如：

#text1,#text2,#text3{
            color: blue;
        }

表示将text1，text2，text3的文本颜色设置为蓝色

二、更多属性

1. Clear清除属性
元素浮动之后，周围的元素会重新排列，为了避免这种情况，可以使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。

.clear{
            clear: both;
        }

2. overflow属性
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

p{
            width:150px;
            height:30px;
            line-height: 30px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis;
        }

效果为单行省略

三、简单网页的制作

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="./css/index.css"/>
</head>
<body>
<div class="fs_center grid_cl">
    <div class="fs_top">
        <div class="fs_logo">
            <a href="#">
                <img src="./img/logo.gif" alt=""/>
            </a>
        </div>
        <div class="fs_menu">
            <ul class="fs_nav">
                <li id="selectRed">首 页</li>
                <li>集团概况</li>
                <li>新闻中心</li>
                <li>产品服务</li>
                <li>企业文化</li>
                <li>综合业务</li>
                <li>品牌建设</li>
                <li>人力资源</li>
                <li>国际合作</li>
            </ul>
        </div>
    </div>
    <div class="fs_banner grid_cl">
        <img src="./img/banner.gif" alt=""/>
    </div>
    <div class="fs_news grid_cl">
        <div class="fs_cl1">
            <h4>
                <span>图片</span>新闻
            </h4>
            <a href="#">
                <img src="./img/news.jpg" alt=""/>
            </a>
        </div>
        <div class="fs_cl2 ">
            <h4 class="fs_bg">
                集团新闻
            </h4>

            <div class="fs_newslist">
                <ul>
                    <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li>
                    <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li>
                    <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li>
                    <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li>
                    <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li>
                    <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司保利集团董事视察辽宁公司</span></a></li>
                    <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司保利集团董事视察辽宁公司</span></a></li>
                    <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li>
                </ul>
            </div>
        </div>
        <div class="fs_cl3">
            <h4 class="fs_bg">
                公司简介
            </h4>

            <div class="fs_cl3_info">
                <p>
                    保利房地产（集团）股份有限公司是中国保利集团控股的大型国有房地产上市公司，也是中国保利集团房地产业务的主要运作平台，国家一级房地产开发资质企业，国有房地产企业综合实力榜首，并连续五年蝉联央企房地产第一名。</p>
                <img src="./img/company_02.jpg" alt=""/>
            </div>
        </div>
    </div>
    <div class="showlist grid_cl">
        <div class="show">
            <h4 class="fs_bg fs_title">项目展示</h4>

            <div class="showimg">
                <a href="#"><img src="./img/1.jpg" alt=""/></a>
                <a href="#"><img src="./img/2.jpg" alt=""/></a>
                <a href="#"><img src="./img/3.jpg" alt=""/></a>
                <a href="#"><img src="./img/4.gif" alt=""/></a>
            </div>
        </div>
        <div class="search">
            <h4><span>站内</span>搜索</h4>

            <form class="btnsear">
                <ul>
                    <li><label for="">关键字:</label><input type="text"/></li>
                    <li>
                        <input type="submit" value="Search"/>
                    </li>
                </ul>
            </form>
        </div>
    </div>
    <div class="footer">
        <div class="info">
            <span>版权信息：&copy;有限公司 </span>
            <span>2018-2019 </span>
        </div>
    </div>
</div>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 14px;
    background-image: url("../img/body.gif");
}

.fs_center {
    margin: auto;
    height: auto;
}

.grid_cl {
    width: 960px;
    margin: auto;
    background: #fff;
}

.fs_top {
    height: 54px;
}

.fs_logo {
    float: left;
    width: 230px;
}

.fs_menu {
    float: left;
    width: 730px;
}

.fs_nav {
    overflow: hidden;
    border-top: 3px solid black;
    margin-top: 10px;
}

.fs_nav > li {
    list-style: none;
    float: left;
    padding: 0 12px;
    height: 40px;
    line-height: 40px;
}

#selectRed {
    background: red;
    color: #fff;
}

.showlist {
    height: 210px;
}

.fs_nav > li:hover {
    background: red;
    color: #fff;
}

.fs_banner {
    margin-top: 3px;
    height: 230px;
}

.fs_banner > img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.fs_news {
    height: 260px;
    padding: 0 5px;
    box-sizing: border-box;
}

.fs_cl1, .fs_cl3 {
    width: 300px;
    height: 260px;
    float: left;
}

.fs_cl2 {
    width: 330px;
    height: 260px;
    float: left;
    margin: 0 10px;
}

.fs_news h4 {
    height: 30px;
    line-height: 30px;
    padding-left: 1em;
}

.fs_cl1 > h4 span {
    color: red;
}

.fs_bg {
    background: url("../img/ico5.gif") no-repeat left;
    padding-left: 1.5em !important;
}

.fs_cl1 > a img {
    width: 280px;
    border-radius: 5px;
    padding: 5px;
    background: #f1f1f1;
}

.fs_newslist > ul {
    border-top: 1px solid red;
}

.fs_newslist > ul > li {
    border-bottom: 1px dashed silver;
    list-style-type: square;
    list-style: none;
    overflow: hidden;
    padding-left: 10px;
    background: url("../img/ico1.gif") no-repeat left;
}

.fs_newslist > ul > li a {
    text-decoration: none;
    color: #000;
    line-height: 26px;
}

.fs_newslist > ul > li a:hover {
    color: red;
}

.fs_newslist > ul > li a span:nth-child(2) {
    overflow: hidden;
    width: 240px;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    float: right;
}

.fs_newslist > ul > li a span:nth-child(1) {
    float: right;
}

.fs_cl3_info {
    overflow: hidden;
}

.fs_cl3_info > p {
    width: 140px;
    line-height: 22px;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    float: left;
}

.fs_cl3_info > img {
    float: right;
    height: 212px;
}

.show {
    width: 650px;
    float: left;
}

.search {
    width: 200px;
    float: left;
}

.showimg {
    border-top: 1px solid red;
}

.showimg img {
    width: 158px;
}

.showimg > a {
    float: left;
    margin: 4px 0 0 4px;
}

.fs_title {
    line-height: 20px;
}

.search {
    margin: 40px 0 0 50px;
    padding: 15px 0;
    background: #efefef;
}

.search > h4 {
    line-height: 30px;
    padding-left: 15px;
    border-bottom: 1px solid #dbdbdb;
}

.search > h4 > span {
    color: red;
}

.btnsear li {
    list-style: none;
    text-align: center;
    margin: 15px 0;
}

.btnsear li input[type=text] {
    width: 140px;
    outline: none;
}

.btnsear li label {
    color: red;
}

.btnsear li input[type=submit] {
    width: 70px;
    height: 25px;
    line-height: 25px;
    border-radius: 5px;
    background: red;
    color: #fff;
    outline: none;
    border: 1px solid #fff;
}

.footer {
    width: 960px;
    height: 100px;
    background: #4787e7;
    clear: both;
    text-align: center;
    line-height: 100px;
}

.info {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
}

.info > span {
    display: block;
}
img{
    border: 0;
}