做练习可帮助(三)

最新推荐文章于 2024-08-18 23:31:20 发布

m0_67176957

最新推荐文章于 2024-08-18 23:31:20 发布

阅读量228

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_67176957/article/details/123772758

版权

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjcxNzY5NTc=,size_8,color_FFFFFF,t_70,g_se,x_16

以下内容是去掉默认格式进行的

<style>

a{ 【统一去除下划线】

text-decoration:none;

}

设置容器的样式

.news-wrapper{

设置宽度

width:300px;

设置高度

height:358px;

设置上边框

border-top:1px solid #ddd;

}

设置news-title

.news-title{

为了边框和文字宽度一致，需要将h2转换为行内块元素

display:inline-block;

设置高度

height:40px;

设置上边框

border-top:1px red soild;

通过margin-top将h2上移，盖住上边框

margin-top:-1px;

padding-top:10px;

}

设置title中超链接的样式

.news-title a{

去除下划线

text-decoration:none;

设置颜色

color:#40406B;

设置文字的加粗效果

font-weight:bold;

}

设置图片容器的高度

.news-img{

height:150px;

}

设置图片的文字效果

.news-img .img-title{

向上移动文字

margin-top:-30px;

设置字体颜色

color:#fff;

设置加粗

font-weight:bold;

设置padding

padding-left:30px;

}

设置新闻列表

.news-list{

设置上外边距

margin-top:20px;

设置项目符号

list-style:square;

}

设置li

.news-list li{

设置下外边距

margin-bottom:17px;

}

通过before伪元素，来为每一个li添加项目符号

.news-list li::before{

content:‘▪’;

color:rgb(218, 218, 218);

font-size:12px;

margin-right;4px;

}

设置li中文字

.news-list li a{

设置字体大小

font-size:14px;

设置字体颜色

color:#666;

}

设置超链接的鼠标移入的样式

.news-list li a:hover{

color:red;

}

</style>

</head>

<body>

创建新闻列表的外侧的容器

创建一个标题标签

</h2>

创建一个图片的容器

创建图片标题

费德勒首负迪米，扶额头不满发挥

</h3>

</a>

</div>

新闻列表

<li>

<a herf=“#”>乔治：我爱LA喜欢和LBJ一起打球</a>

</li>

<li>

<a herf=“#”>格林：3年前降薪就在等KD 特制T桖衫嘲讽LBJ</a>

</li>

<li>

<a herf=“#”>塔克4000双鞋让保罗羡慕嫉妒乔丹被震惊</a>

</li>

<li>

<a herf=“#”>CBA下季新赛制：常规赛4组循环增至46轮</a>

</li>

</ul>

</body>

多做几遍这个练习，做到可以独自完成时，之前的内容就差不多掌握了

m0_67176957

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
做练习可帮助(三)

以下内容是去掉默认格式进行的 <style> a{ 【统一去除下划线】 text-decoration:none; } 设置容器的样式 .news-wrapper{ 设置宽度 width:300px; 设置高度 ...
复制链接

扫一扫