HTML语义和CSS样式

最新推荐文章于 2022-03-23 16:21:37 发布

HelloWorld. py

最新推荐文章于 2022-03-23 16:21:37 发布

阅读量315

点赞数

分类专栏： Web

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

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

样式图（一）

HTML语义分析

div > (h3 > a), ul > [(li>a)] * 5

HTML 代码实现

<div id="top" class="u">
        <h3><a  href="#">包食宿</a></h3>
        <ul>
            <li class="li_1"><a href="#">申请试听</a></li>
            <li class="li_2"><a href="#">免费资料</a></li>
            <li class="li_3"><a href="#">网课咨询</a></li>
            <li class="li_4"><a href="#">学习交流群</a></li>
            <li class="li_5"><a href="#top">返回顶部</a></li>
        </ul>
    </div>

CSS结构实现

h3的左上和右上顶角的弧度，背景色，字体位置
这里利用padding定字体位置

  .u h3{
        
        padding: 17px 0 0 12px;
        width: 62px;
        height: 44px;
        border-radius: 10px 10px 0 0;
        background-color: #f78a45;
        border-top: 1px solid #e0e0e0;
    }

在a标签中修改字体的样式

.u h3 a{
        font: bold 16px/26px "微软雅黑";
        color: white;
    }

li 的需要设置的样式有字体样式确定字体位置，添加背景图

.u li{
        border-top: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        width: 73px;
        height: 30px;
        padding: 48px 0 0 0;
        text-align: center;   /* li div 可以直接让文字水平居中 */
    }
    .u li a{
        font: 12px/22px "微软雅黑";
        color: #454545;
    }

li的背景图，以及鼠标悬停时的样式

.u .li_1{
        background: url(images/icon-tel1.png) no-repeat 50% 13px;        
    }
    .u .li_2{
        background: url(images/icon-file1.png) no-repeat 50% 13px;        
    }
    .u .li_3{
        background: url(images/icon-info1.png) no-repeat 50% 13px;        
    }
    .u .li_4{
        background: url(images/icon-qq1.png) no-repeat 50% 13px;        
    }
    .u .li_5{
        background: url(images/icon-up1.png) no-repeat 50% 13px;        
    }
    .u .li_1:hover{
        background: url(images/icon-tel2.png) no-repeat 50% 13px;
        background-color: #f67524;        
    }
    .u .li_2:hover{
        background: url(images/icon-file2.png) no-repeat 50% 13px;        
        background-color: #f67524;    
    }
    .u .li_3:hover{
        background: url(images/icon-info2.png) no-repeat 50% 13px;        
        background-color: #f67524;    
    }
    .u .li_4:hover{
        background: url(images/icon-qq2.png) no-repeat 50% 13px;        
        background-color: #f67524;    
    }
    .u .li_5:hover{
        background: url(images/icon-up2.png) no-repeat 50% 13px;        
        background-color: #f67524;    
    }

样式图（二）

1.HTML语义分析

div > [(div>a)] * 5

HTML

<div class="music">
        <div><a href="#">发现音乐</a> </div>
        <div><a href="">我的音乐</a> </div>
        <div><a href="">朋友</a> </div>
        <div><a href="">商城</a> </div>
        <div><a href="">音乐人</a> </div>
        <div><a href="">下载客户端</a> </div>
    </div>

2.CSS样式实现

5个li的样式一致，可以利用div height 由内容撑起的特性

确定字体行高，字体的行高即小div的高度，再让div左浮动

鼠标悬停效果，需要注意背景图和背景颜色的覆盖问题

 .music{
        width: 606px;
        margin-left: auto;
        margin-right: auto;
    }
    .music div a{
        font: 14px/70px "微软雅黑";
        color: white;
    }
    .music div{
        width: 96px;
        height: 70px;
        background-color: #242424;
        text-align: center;
        border-top: 1px solid #b6b4b6;
        border-bottom: 1px solid #c20c0c;
        float: left;
    }
    .music div:hover{
        
        background: url(images/task2_03.jpg) no-repeat 50% 100%;
        background-color: #000000;
    }

样式图（三）

HTML语义分析

div > ((div > a)*10)

HTML

<div class="JD">
        <div><a href="#">手机</a> | <a href="#">运营商</a> | <a href="#">智能数码</a></div>
        <div><a href="#">空调</a> | <a href="#">电视</a> | <a href="#">冰箱</a> | <a href="#">洗衣机</a></div>
        <div><a href="#">厨卫大电</a> | <a href="#">生活家电</a> | <a href="#">厨具</a></div>
        <div><a href="#">电脑办公</a> | <a href="#">相机</a> | <a href="#">DIY</a></div>
        <div><a href="#">家具</a> | <a href="#">家装</a> | <a href="#">家纺</a> | <a href="#">日用</a></div>
        <div><a href="#">食品</a> | <a href="#">酒水</a> | <a href="#">生鲜</a> | <a href="#">特产</a></div>
        <div><a href="#">美妆</a> | <a href="#">个护</a> | <a href="#">清洁</a> | <a href="#">宠物</a></div>
        <div><a href="#">母婴</a> | <a href="#">玩具</a> | <a href="#">车床</a> | <a href="#">童装</a></div>
        <div><a href="#">运动</a> | <a href="#">户外</a> | <a href="#">足球</a> | <a href="#">跑步机</a></div>
        <div><a href="#">男装</a> | <a href="#">女装</a> | <a href="#">内衣</a> | <a href="#">鞋靴</a></div>
        <div><a href="#">箱包</a> | <a href="#">钟表</a> | <a href="#">珠宝</a> | <a href="#">艺术</a></div>
        <div><a href="#">汽车</a> | <a href="#">汽摩</a> | <a href="#">二手车</a> | <a href="#">车品</a></div>
        <div><a href="#">图书</a> | <a href="#">艺术</a> | <a href="#">原版</a> | <a href="#">文学</a></div>
        <div><a href="#">医药健康</a> | <a href="#">计生情趣</a></div>
        <div><a href="#">理财</a> | <a href="#">分期</a> | <a href="#">保险</a></div>
    </div>

CSS

 .JD{
        width: 191px;
        background: #252221;
        margin-left: auto;
        margin-right: auto;
    }
    .JD div{
        text-align: center;
    }
    .JD a{
        font: 13px/33px "微软雅黑";
        color: white;
    }
    
    .JD div:hover{
        background: white;
        color: #333333;
    }
    .JD div:hover a{
        color: #333333;
    }
    .JD div a:hover{
        color: #ff6600;
    }

样式图（四）

HTML语义分析

div > ((div>p) * 3)

 <div class="old">
        <div class="p_1"><p>我国养老金替代率过低，很多老人退休后没有足够的经济来源，所以只能再度出山，通过工作来充实自己的钱包。</p></div>
        <div class="p_2">
            <p>即使在社会福利制度相对完善的国建，养老金也是越来越不够花了。我们应当认清现实：只靠养老金就能颐养天年的日子，已经渐渐地一去不复返了。退休者想要过得更富裕，就得自己想办法挣钱。
            </p></div>
        <div class="p_3"><p>我国法律对于在业老人缺乏足够的保护，激励企业雇佣老人的相关政策也不够完备。此外，让退休老人再就业，远不能解决所有的症结，政府依然需要针对养老问题加大投入。</p></div>
        
        
    </div>

2.CSS

 .old{
        width: 772px;
        height: 378px;
        border-left: 6px solid #9a9db7;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        background-color: #ededf5;
        margin-left: auto;
        margin-right: auto;
    }
    .old div{
        font: 18px/30px "微软雅黑";
        color: black;
        width: 646px;
        margin-left: 36px;
        border-bottom: 1px solid #969696;
    }
    .old p{
        padding: 26px 0 24px 51px;
    }
    .old .p_1{
        background: url(images/task4_03.jpg) no-repeat 0 27px;
    }
    .old .p_2{
        background: url(images/task4_06.jpg) no-repeat 0 27px;
    }
    .old .p_3{
        background: url(images/task4_08.jpg) no-repeat 0 27px;
    }

HelloWorld. py

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML语义和CSS样式

样式图（一）HTML语义分析 div > (h3 > a), ul > [(li>a)] * 5 HTML 代码实现 <div id="top" class="u"> <h3><a href="#">包食宿</a></h3> <ul> <li class="li_1"><a href="#">申请试听</a&.
复制链接

扫一扫

专栏目录