网页新闻界面建立
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>娱乐新闻</title>
<style>
body{
background-color:silver;
}
/*去除下划线*/
a{
text-decoration: none;
}
.news-wrapper{
/*设置宽度*/
width: 350px;
/*设置高度*/
height: 357px;
/*设置背景颜色*/
background-color:#fff;
/*设置上边框*/
border-top: 1px #ddd solid;
margin: 50px auto;
}
.news-title{
/*将行内元素转成行内块，为了使边框和文字一样宽*/
display: inline-block;
/*设置上边框*/
border-top: 1px red solid;
/*设置上边框上移，盖住灰色边框*/
margin-top: -1px;
/*设置高度*/
height: 40px;
/*文字垂直居中*/
line-height: 40px;
}
/*设置title中的超链接的样式*/
.news-title a{
/*设置文字大小*/
font-size: 16px;
/*设置文字颜色*/
color: #40406B;
/*文字加粗*/
font-weight: bold;
}
.news-title a:hover{
color: red;
}
/*设置图片容器高度*/
.news-img{
height: 100px;
}
.news-img .img-title{
/*上移文字*/
margin-top: -30px;
/*文字右移*/
margin-left: 25px;
/*设置字体颜色*/
color:whitesmoke;
/*设置字体加粗*/
font-weight: bold;
}
.news-list{
margin-top: 20px;
}
/*设置li*/
.news-list li{
margin-bottom: 20px;
}
/*设置li中的文字样式*/
.news-list li a{
/*设置字体大小、颜色*/
font-size: 14px;
color: gray;
}
/*设置鼠标超链接移入状态*/
.news-list li a:hover{
color: red;
}
.news-list li::before{
/*添加项目符号*/
content: "■";
/*设置颜色大小边距*/
color: rgb(218,218,218);
font-size: 12px;
margin-right: 4px;
}
</style>
</head>
<body>
<div class="news-wrapper">
<!--创建标题标签-->
<h2 class="news-title"><a href="#">娱乐</a></h2>
<!--创建图片容器-->
<div class="news-img">
<a href="#">
<img src="2.PNG" alt="">
<h3 class="img-title"> <span>#</span> </h3>
</a>
</div>
<!--新闻列表-->
<ul class="news-list">
<li><a href="#">黄宗泽餐厅宣布停业 损失超百万</a></li>
<li><a href="#">张凯丽：演员不要急功近利，要有真材实料</a></li>
<li><a href="#">网曝杨洋蜡像被年轻女子骚扰</a></li>
<li><a href="#">丁太昇吐槽郭敬明抄袭 言语粗俗被骂</a></li>
</ul>
</div>
</body>
</html>
2067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
