Day08

不万能的小李.

已于 2023-08-10 20:04:11 修改

阅读量37

点赞数

分类专栏： HTML5 和 css 文章标签：前端 css html5

于 2023-07-14 16:39:29 首次发布

本文链接：https://blog.csdn.net/Li1023055421/article/details/131726913

版权

HTML5 和 css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

01、布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局</title>
    <link rel="stylesheet" href="/css/layout.css">
</head>
<body>
    <div class="nav">
        <span>内地</span>
        <a href="###">爱情</a>丨
        <a href="###">古装</a>丨
        <a href="###">喜剧</a>丨
        <a href="###">更多 ></a>
    </div>
    <div class="wp clearfix">
        <!-- 浮动布局 -->
        <!-- 左边内容 start -->
        <div class="l-cont">
            <img src="/images/吴莫愁薛之谦.png" alt="">
            <h3>大学生来了</h3>
            <p>吴莫愁现场奇迹教学吴莫愁现场奇迹教学</p>
        </div>
        <!-- 左边内容 end -->

        <!-- 中间内容 start -->
        <div class="mid-cont">
            <ul class="list clearfix">
                <li>
                    <a href="###">
                        <img src="/images/wlop1.jpg" alt="">
                        <span>跨界歌王</span>
                        <em>巫启贤大唱情歌表白刘涛</em>
                    </a>
                </li>
                <li>
                    <a href="###">
                        <img src="/images/wlop1.jpg" alt="">
                        <span>跨界歌王</span>
                        <em>巫启贤大唱情歌表白刘涛</em>
                    </a>
                </li>
                <li>
                    <a href="###">
                        <img src="/images/wlop1.jpg" alt="">
                        <span>跨界歌王</span>
                        <em>巫启贤大唱情歌表白刘涛</em>
                    </a>
                </li>
                <li>
                    <a href="###">
                        <img src="/images/wlop1.jpg" alt="">
                        <span>跨界歌王</span>
                        <em>巫启贤大唱情歌表白刘涛</em>
                    </a>
                </li>
                <li>
                    <a href="###">
                        <img src="/images/wlop1.jpg" alt="">
                        <span>跨界歌王</span>
                        <em>巫启贤大唱情歌表白刘涛</em>
                    </a>
                </li>
                <li>
                    <a href="###">
                        <img src="/images/wlop1.jpg" alt="">
                        <span>跨界歌王</span>
                        <em>巫启贤大唱情歌表白刘涛</em>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 中间内容 end -->

        <!-- 右边内容 start -->
        <div class="r-cont">
            <img src="/images/小S.png" alt="">
            <h3>小S古装魅惑小S古装魅惑小S古装魅惑</h3>
            <ul class="r-list">
                <li>1、小S古装魅惑小S古装魅惑</li>
                <li>2、小S古装魅惑小S古装魅惑</li>
                <li>3、小S古装魅惑小S古装魅惑</li>
                <li>4、小S古装魅惑小S古装魅惑</li>
                <li>5、小S古装魅惑小S古装魅惑</li>
            </ul>
        </div>
        <!-- 右边内容 end -->
    </div>
    <div class="nav">
        <span>内地</span>
        <a href="###">爱情</a>丨
        <a href="###">古装</a>丨
        <a href="###">喜剧</a>丨
        <a href="###">更多 ></a>
    </div>

        <ul class="list mid clearfix">
            <li>
                <a href="###">
                    <img src="/images/wlop1.jpg" alt="">
                    <span>跨界歌王</span>
                    <em>巫启贤大唱情歌表白刘涛</em>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="/images/wlop1.jpg" alt="">
                    <span>跨界歌王</span>
                    <em>巫启贤大唱情歌表白刘涛</em>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="/images/wlop1.jpg" alt="">
                    <span>跨界歌王</span>
                    <em>巫启贤大唱情歌表白刘涛</em>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="/images/wlop1.jpg" alt="">
                    <span>跨界歌王</span>
                    <em>巫启贤大唱情歌表白刘涛</em>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="/images/wlop1.jpg" alt="">
                    <span>跨界歌王</span>
                    <em>巫启贤大唱情歌表白刘涛</em>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="/images/wlop1.jpg" alt="">
                    <span>跨界歌王</span>
                    <em>巫启贤大唱情歌表白刘涛</em>
                </a>
            </li>
        </ul>
</body>
</html>

css样式

* {
    margin: 0;
    padding: 0;
}
body {
    background:#e4e4e4;
}
ul,ol,li { list-style-type: none;}
a {
    text-decoration: none;
    color: #333;
}
.clearfix::after {
    content: '';
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
}
/* 导航分类 */
.nav {
    padding: 16px 0;
    margin: 0 auto;
    width: 1175px;
}
.nav * {
    color: #808080;
}
.nav span {
    font-size: 28px;
}
.nav a {
    font-size: 15px;
    padding: 0 15px;
}

/* 中间内容 */
.wp {
    margin: 0 auto;
    width: 1175px;
    /* border: 1px #f00 solid; */
}
.l-cont,.mid-cont,.r-cont {
    float: left;
    height: 330px;
}
.l-cont {
    width: 380px;
    background: #ccc;
}
.mid-cont {
    margin-left: 15px;
    width: 600px;
    /* background: #04be02; */
}
.r-cont {
    width: 180px;
    background:#d3d3d3 ;   
}

.l-cont img {
    width: 100%;
    height: 270px;
}
.l-cont h3,.l-cont p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.l-cont h3 {
    padding: 0 10px;
    line-height: 22px;
}
.l-cont p {
    padding: 0 10px;
    line-height: 22px;
}
/* 中间样式的内容 */
.list li {
    float: left;
    height: 160px;
    width: 180px;
    background: #d3d3d3;
    margin: 0 20px 10px 0;
}
.list li * {
    display: block;
    font-style: normal;
}
.list li img {
    width: 100%;
    height: 102px;
}
.list li span {
    line-height: 28px;
    padding-left: 10px;
    font-weight: bold;
}
.list li em {
    line-height: 20px;
    font-size: 14px;
    color: #808080;
    padding-left: 10px;
}
.list li span,.list li em {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 右侧列表 */
.r-cont img {
    width: 100%;
    height: 100px;
}
.r-cont h3 {
    line-height: 28px;
    width: 160px;
    height: 28px;
    overflow: hidden;
    margin: 0 auto 10px;
}
.r-list {
    margin: 0 auto;
    width: 140px;
    border-top: 1px #333 dotted;
}
.r-list li {
    line-height: 30px;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 居中 */
.mid {
    margin: 0 auto;
    width: 1175px;
    /* border: 1px #f00 solid; */
}
.mid li {
    margin-right: 19px;
}
.mid li:nth-last-child(1) {
    margin-right: 0;
}

02、sprite精灵图

精灵图：又叫 sprite（雪碧图）

他是把在项目开发中所有用到的小图标拼合到一个图片上，这样

在项目加载的时候，一次行把小图标请求到客户端。减少了http请求，减轻了服务器压力，提高了服务器效率