继续无聊的样式图

最新推荐文章于 2021-06-04 20:00:48 发布

HelloWorld. py

最新推荐文章于 2021-06-04 20:00:48 发布

阅读量262

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/AK47red/article/details/114763068

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

刚接触前端的第6天。。。根据样式做页面好难呀。。。

目前主要的痛点：

PS不熟练
页面结构拆分的不合理，简单问题复杂化。。。
css语法不熟悉
脑子不好

所以只能多练习。。。

无聊的样式图（1）

  <div class="sport">
        <div class="title">
            <div><img src="images/1_03.jpg" alt=""></div>
            <p>运动小白</p>
        </div>
        <ul>
            <li><a href="#"> 懒人运动</a></li>
            <li><a href="#"> 跑步姿势</a></li>
            <li><a href="#"> 健身干货</a></li>
            <li><a href="#"> 跑酷生活</a></li>
            <li><a href="#"> IN装备</a></li>
            <li><a href="#"> 识品牌</a></li>
        </ul>
    </div>

CSS

 .sport ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .sport a{
            text-decoration: none;
            font: 14px/26px "宋体";
            color: #5b5b5b;
        }
        .sport{
            background-color: #ffffff;
            width: 190px;
            margin-left: auto;
            margin-right: auto;
        }
        .title{
            background-color: #1498d6;
        }
        .title div{
            width: 26px;
            height: 26px;
            padding-left: 85px;
            padding-top: 5px;
        }
        .title p{
            font: 12px/24px "宋体";
            color: #f7fdfb;
            text-indent: 74px;
        }
        .sport li{
            /* font: 14px/26px "宋体";
            color: #5b5b5b; */
            padding-top: 23px;
            margin-left: 41px;
            margin-right: 42px;
            border-bottom: 1px solid #eaeaea;
            text-indent: 27px;
        }

无聊的样式图（2）

<div class="client">
        <h3>{客户案例}</h3>
        <h4>WITH THE BEST PROFESSIONAL TECHNOLOGY,TO DESIGN THE BEST INNOV ATIVE WEB SITE </h4>
        <div class="img">
            <div class="img_1"> <img src="images/2_07.jpg" alt=""> </div>
            <div class="img_2"> <img src="images/2_07.jpg" alt=""> </div>
            <div class="img_3"> <img src="images/2_07.jpg" alt=""> </div>
        </div>
         <div class="a"><a href="#">view more</a></div>
    </div>

css

 .client{
            width: 1087px;
            height: 395px;
            background: #f8f8f8;
            margin-left: auto;          /* 居中显示 */
            margin-right: auto;
        }
        .client h3{
            font: 20px/30px "微软雅黑";
            padding: 13px 0 0 491px;
            color: #46c5b7;
        }
        .client h4{
            font: 14px/26px   "微软雅黑";
            color: #c2aa9d;
            word-spacing: 5px;
            padding-left: 231px;
        }
        .img >div{
            width: 339px;
            height: 181px;
            padding-top: 35px;
        }
        .client .img_1{
            padding-left: 15px;
            position: absolute;  
        }
        .client .img_2{
            padding-left: 373px;
            float: left;  /* 设置浮动效果 */
            position: absolute;
        }
        .client .img_3{
            padding-left: 731px;
            float: left;
        }
        .client a{
            font: 14px/37px Arial;
            text-decoration: none;
            color: #befffe;
            text-transform: uppercase;
        }
        .client .a{  
            width: 176px; 
            height: 37px ;
            margin: 254px 0 0 456px;  /* 上面的div使用了绝对定位。这个div是相对于h4所在的位置 */
            border-radius: 12px 12px 12px 12px;
            background-color: #26c7b8;
            text-indent: 47px;
        }

无聊的样式图（3）

 <div class="Lemon">
        <h3> 成功案例 <span>SUCCESSFUL CASE</span></h3>
        <div><img src="images/3_03.jpg" alt=""></div>
        <h4>家饰类 : 柠檬树</h4>
        <p>今天的O2O,实际是互联网经济和传济水乳交融纠结又沟业经营的角度，我讲讲这些年来...</p>  <!-- 结构块采用块级标签，在一个结构里面再次进行区分时考虑行级标签 -->
    </div>

css

 .Lemon{
            width: 362px;
            height: 416px;
            color: #ffffff;
            margin-right: auto;
            margin-left: auto;  /* 居中显示 */
        }
        .Lemon h3{
            width: 309px;
            font: bold 24px/34px "微软雅黑";
            color: #006da3;
            padding: 20px 0 0 27px;
        }
        .Lemon h3>span{
            font: 20px/34px Arial;
            color: #aba7a1;
            /* float: right;  用text-align:right; 不会右对齐 
            用 float文字会上飘。。。
            */
            float: right;
        }
        .Lemon div{
            width: 309px;
            height: 226px;
            padding: 20px 0px 0px 27px;
        }
        .Lemon >h4{
            font: 14px/32px "微软雅黑";
            color: #898681;
            padding-left: 27px;
            padding-top: 11px;
        }
        .Lemon >p{
            width: 309px;
            font: 12px/21px "微软雅黑";
            color: #c4c1ba;
            padding-left: 27px;
        }

无聊的样式图（4）

<div class="free">
        <div>
            <h3>免费食宿</h3>
            <p>封闭式教学，高端食宿环境给学员有力的 <br> 后勤保障。</p>
        </div>
    </div>

css

.free{
            width: 487px;
            height: 156px;
            background-color: #ffffff;
            margin-left: auto;
            margin-right: auto;
        }
        .free >div{
            width: 470px;
            height: 119px;
            background-color: #f8f8f8;
            border-right: 2px solid #4caafc;
            margin: 18px 0 0 6px;
            background: url(images/task1_03.jpg) no-repeat;
        }
        .free h3{
            font: 28px/56px "微软雅黑";
            color: #333333;
            padding: 3px 0 0 114px;
        }
        .free p{
            font: 18px/27px "微软雅黑";
            color: #787878;
            padding-left: 114px;
        }

无聊的样式图（5）

 <div class="insurance">
        <h4>境外旅游保险</h4>
        <div>
            <p>为境外线路贴心打造，提供意外身故、医疗、24小时紧急搜救等综合保障，异国他乡也能畅行无忧！</p>
            <div>查看全部产品></div>
        </div>
    </div>

css

.insurance{
            width: 238px;
            height: 378px;
            background-color: #ffffff;
            margin-right: auto;
            margin-left: auto;
        }
        .insurance >h4{
            width: 224px;
            font: 22px/36px "微软雅黑";
            color: #0088d3;
            margin: 7px;
            border-bottom: 2px solid #42a6f5;
        }
        .insurance >div{
            width: 224px;
            height: 315px;
            margin: 16px 0 0 7px;
            background: url(images/task2.jpg) no-repeat;
        }
        .insurance >div p{
            font: 14px/26px "微软雅黑";
            color: white;
            padding: 21px 17px 0 16px;
        }
        .insurance >div div{
            font: 14px/24px "微软雅黑";
            color: #355b94;
            padding-top: 157px;
            text-indent: 65px;
        }

无聊的样式图（6）

<div class="menu">
        <ul>
            <li class="a1"><a href="#">菜谱大全</a> </li>
            <li class="a2"><a href="#">食材大全</a> </li>
            <li class="a3"><a href="#">品质珍选</a> </li>
            <li class="a4"><a href="#">专题专区</a> </li>
            <li class="a5"><a href="#">一起红</a> </li>
        </ul>
    </div>

css

.menu{
            width: 219px;
            height: 360px;
            background-color: #a09c96;
            margin-right: auto;
            margin-left: auto;
        }
        .menu ul{
            list-style: none;
            padding: 0;
            margin: 0;
            
        }
        .menu li{
            width: 219px;
            background: url(images/menu_06.jpg) no-repeat 198px ;
            /* border: red solid 1px; */
            text-indent: 49px;
        }
        .menu .a1{
            padding-top: 31px;
            background: url(images/menu_03.jpg) no-repeat 20px 52px;
        }
        .menu .a2{
            background: url(images/menu_11.jpg) no-repeat 20px;
        }
        .menu .a3{
            background: url(images/menu_15.jpg) no-repeat 20px;
        }
        .menu .a4{
            background: url(images/menu_18.jpg) no-repeat 20px;
        }
        .menu .a5{
            background: url(images/menu_20.jpg) no-repeat 20px;
        }
        .menu a{
            font: 18px/60px "微软雅黑";
            color: #ffffff;
            text-decoration: none;
        }

无聊的样式图（7）

HTML

<div class="serve">
        <div class="img"><img src="images/icons1.png" alt=""></div>
        <h3>一站式专属服务</h3>
        <p>全国470家直营分部</p>
    </div>

css

 .serve{
            width: 250px;
            height: 420px;
            margin-right: auto;
            margin-left: auto;
            background: url(images/1.jpg) no-repeat;
        }
        .serve div{
            width: 73px;
            height: 98px;
            padding: 120px 0 0 89px;
        }
        .serve h3{
            font: 24px/34px "微软雅黑";
            color: white;
            padding-top: 20px;
            text-indent: 41px;
        }
        .serve p{
            font: 18px/28px "微软雅黑";
            color: white;
            padding-top: 8px;
            text-indent: 47px;
        }

无聊的样式图（8）

HTML

<div class="digital">
        <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>
            <li><a href="">电源插件</a></li>
            <li><a href="">健康儿童</a></li>
            <li><a href="">耳机音箱</a></li>
            <li><a href="">生活箱包</a></li>
        </ul>
    </div>

css

.digital{
            width: 233px;
            height: 439px;
            background-color: #929399;
            margin-right: auto;
            margin-left: auto;
            padding-top: 21px;
        }
        .digital ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }      
        .digital li{
            width: 233px;
            height: 42px;
            text-indent: 28px;
        }
        .digital a{
            font: 14px/42px "微软雅黑";
            color: white;
            text-decoration: none;
        }
        .digital li:hover{/* li和分号之间不能加空格 */
            background-color: #ff6700;
        }

HelloWorld. py

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
继续无聊的样式图

刚接触前端的第6天。。。根据样式做页面好难呀。。。目前主要的痛点：PS不熟练页面结构拆分的不合理，简单问题复杂化。。。 css语法不熟悉脑子不好所以只能多练习。。。无聊的样式图（1）h5 <div class="sport"> <div class="title"> <div><img src="images/1_03.jpg" alt=""></div>
复制链接

扫一扫

专栏目录