前端学习笔记css-05(练习案例)

最新推荐文章于 2024-09-26 22:09:15 发布

沐果果

最新推荐文章于 2024-09-26 22:09:15 发布

阅读量300

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qinjava/article/details/106748194

版权

前端学习专栏收录该内容

23 篇文章

订阅专栏

css练习案例
1、滑动门
在这里插入图片描述
2、手机网站首页

1、代码实现
图片素材
请添加图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style type="text/css">
        li{
            list-style: none;
            float: left;
        }
        li a{
            background-image: url(bg_r1_c1.png);
            background-repeat: no-repeat;
            height: 35px;
            padding-left: 7px;
           display:inline-block;
           color: white;
        }
        li a span{
            background-image: url(bg_r1_c2.png);
            height: 35px;
            display:inline-block;
            background-repeat: no-repeat;
            background-position: right;
            line-height: 35px;
            padding-right: 30px;
        }
        li a:hover{
            background-image: url(bbg_r1_c1.png);
        }
        li a:hover span{
            background-image: url(bbg_r1_c2.png);
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">
                <span>
                    百度一下
                </span>
            </a>
        </li>
        <li>
            <a href="">
                <span>
                    百度
                </span>
            </a>
        </li>
        <li>
            <a href="">
                <span>
                    中国新闻网
                </span>
            </a>
        </li>
    </ul>

</body>
</html>

2、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机首页</title>
    <style type="text/css">
         body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.428571429;
            color: #333333;
            background-color: #ffffff;
            width: 100%;
        }
        input{
            border: 0 none;
            outline-style: none;
        } 
        li{
         display: list-item;
         text-align: -webkit-match-parent;
        }
        ul {
              list-style: none;
        }
        img {
            border: 0 none;
        }
        p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        .header{
            height: 62px;
            width: 980px;
            margin: 0 auto;
        }
        .logo{
            width: 179px;
            height: 39px;
            margin-top: 20px;
            float: left;
        }
        .logo img{
            border: 0 none;
        }
        .search{
            margin-top: 12px;
            float: right;
            border-radius: 5px; /*这句就是重点，让边框变为圆角*/
            border: 1px solid rgb(182, 175, 175); /*让边框变为1px宽度，直线，#CCC颜色*/
            width: 300px;
        }
        .txt{
            width: 250px;
            height: 34px;
            float: left;
        }
        .btn{
            margin-top: 2px;
            width: 34px;
            height: 34px;
            background-image: url(images/search2.jpg);
            float: right;
        }
        .nav{
            width: 980px;
            margin: 0 auto;
            height: 55px;
            background-image: url(images/nav_bg.png);
        }
        .nav li {
          float: left;
        }
        
        .nav li a{
            height: 55px;
            line-height: 55px;
            display: inline-block;
            background-image: url(images/nav_bg-line.png) no-repeat right top;
            padding: 0 46px;
            font-weight: 700;
            color: #000;
        }
        .banner{
            width: 980px;
            margin: 0 auto;
        }
        .gg{
            width: 980px;
            margin: 0 auto;
            height: 29px;
            border-top: 1px solid #EFEFEF;
            border-bottom: 1px solid #EFEFEF;
            margin-bottom: 12px;
            background: #FBFBFB;
        }
         .l-gg{
            float: left;
            line-height: 29px;
        }
        .r-gg{
            float: right;
            margin-top: 6px;
        }
        .news {
            width: 980px;
            margin: 15px auto;
        }
        .clearfix {
            zoom: 1;
        }
        .products{
            width: 310px;
            height: 224px;
            border: 1px solid #E4E4E4;
            margin-right: 12px;
            position: relative;
            float: left;
        }
        
        .newlists{
            height: 224px;
            width: 373px;
            border: 1px solid #E4E4E4;
            float: left;
        }
        .jishu{
            height: 224px;
            width: 268px;
            border: 1px solid #E4E4E4;
            float: right;
        }
        .news-pub {
            margin-top: 13px;
            margin-left: 6px;
            color: #7AB800;
        }
        .news-pub img {
            vertical-align: middle;
        }
        .pro-pic{
            position: absolute;
            left: 60px;
            top: 50px;
        }
        .l-sj {
            position: absolute;
            left: 23px;
            top: 120px;
        }
        .r-sj {
            position: absolute;
            right: 23px;
            top: 120px;
        }
        .newslist-list {
            margin: 10px 18px 0 23px;
        }
        .newslist-list li {
            height: 27px;
            border-bottom: 1px dashed #DCDCDC;
            line-height: 27px;
        }
        .ftcolor {
            color: red;
            font-weight: 700;
        }
        .j-pub {
            height: 12px    ;
            border-left: 3px solid #7AB800;
            margin-top: 10px;
            margin-left: 28px;
            padding-left: 5px;
        }
        .jishu p {
            margin-top: 30px;
            margin-left: 28px;
            line-height: 18px;
        }
        /**
        内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。
        这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。
        在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏，这样就达到了撑开容器的目的。

        **/
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }
        .footer {
            width: 980px;
            margin: 0 auto;
            height: 221px;
            background: #2D2D2D;
            border-bottom: 1px dashed #414141;
        }

        .footer-mid dl {
            margin-left: 100px;
            display: inline-block;
            margin-top: 20px;
            margin-right: 60px;
        }
        .footer-mid dd {
            color: #C7C7C7;
        }
        .footer-mid dt {
            margin-top: 20px;
            color: #707070;
        }
        dt {
            display: block;
        }
        dl {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        body, h1, h2, h3, h4, h5, h6, p, ul, dl, dd {
            margin: 0;
            padding: 0;
        }
        .bottom {
            width: 980px;
            margin: 0 auto;
            height: 54px;
            background: #2D2D2D;
            text-align: center;
            padding-top: 30px;
        }

        .bottom p {
            font-size: 12px;
            color: rgb(168, 165, 165);
            font-family: "宋体","微软雅黑";
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="images/logo.jpg" alt="">
        </div>
        <div class="search">
            <input type="text" value="请输入..." class="txt">
            <input type="button" class="btn">
        </div> 
    </div>
    <div class="nav">
        <div class="nav-con">
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">智能手机</a>
                </li>
                <li>
                    <a href="">平板电脑</a>
                </li>
                <li>
                    <a href="">配件</a>
                </li>
                <li>
                    <a href="">服务支持</a>
                </li>
                <li>
                    <a href="">关于尚合</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <img src="images/banner.jpg" alt="">
    </div>
    <div class="gg">
        <div class="l-gg">
            最新公告：尚合Aone智能手机入网证已获取工信部门审批下发。尚合官网
        </div>
        <div class="r-gg">
            <img src="images/weibo.png" alt="">
            <img src="images/xinlang.png" alt="">
            <img src="images/zone.png" alt="">
            <img src="images/renren.png" alt="">
        </div>
    </div>
    <div class="news clearfix">
        <div class="products">
            <div class="news-pub">
                <img src="images/o.jpg" alt="">
                <span>技术与支持</span>
            </div>
            <div class="pro-pic">
				<img src="images/home_hot_01.png" alt="">
            </div>
            <div class="l-sj">
				<img src="images/left.png" alt="">
            </div>
            <div class="r-sj">
				<img src="images/right.png" alt="">
			</div> 
        </div>
        <div class="newlists">
            <div class="news-pub">
				<img src="images/o.jpg" alt="">
				<span>新闻中心</span>
            </div>
            <ul class="newslist-list">
                <li class="ftcolor">致歉公告</li>
                <li>首批尚合Aonet已全部售馨!</li>
                <li>【媒体报导】国产高性价比 尚合Aonet四核手机评测</li>
                <li>我司产品已经通过了国家强制性产品3C认证</li>
                <li>尚合Aone智能手机入网证已经获工信部门审批下发.</li>
                <li>我司通过ISO9001:2008国际质量管理体系认证</li>
            </ul>
        </div>
        <div class="jishu">
            <div class="news-pub">
                <img src="images/o.jpg" alt="">
                <span>技术与支持</span>
            </div>
            <div class="j-pub">售后服务</div>
            <div class="j-pub">投诉和建议</div>
            <div class="j-pub">联保网点</div>
            <div class="j-pub">常见问题</div>
            <p>深圳市汇聚众合科技发展有限公司
                <br/>
                服务热线：400-633-7922
            </p>
        </div>
    </div>
    <div class="footer">
        <div class="footer-mid">
            <dl>
                <dd>尚合首页</dd>
                <dt>返回首页</dt>
            </dl>
            <dl>
                <dd>尚合首页</dd>
                <dt>返回首页</dt>
            </dl>
            <dl>
                <dd>尚合首页</dd>
                <dt>返回首页</dt>
            </dl>
            <dl>
                <dd>尚合首页</dd>
                <dt>返回首页</dt>
            </dl>
        </div>
    </div>
    <div class="bottom">
        <p>深圳市会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司深圳市</p>
    </div>
</body>
</html>