利用 HBuilderX 设置新闻中心版式

本文介绍: 利用 HBuilde rX 设置新闻中心版式

1、设置该模块宽度为400px；
2、设计“新闻中心”标题字号为20px，行高为50px；
3、列表项标志使用“新闻.jpg”图片，列表项行高为50px，除最后一项其它列表项设置底部边框为1px 虚线，颜色为#d1d1d1;
4、日期向右边浮动；
5、列表超链接文本颜色为#666666，鼠标指向列表链接文本颜色变为#FFA500。
在这里插入图片描述

背景属性：
background-color设置背景颜色
background-image设置背景图像
background-repeat设置背景平铺
background-attachment设置背景图像是否固定
background-position设置背景图像位置
background背景属性的缩写
background–color 属性

body { background-color: red; }

改变整个页面的背景色

h1 { background-color: blue; }

改变h1标题的背景色
back g round-i m a g e 属性

body { background-image: url("bg.gif"); }

注：url 括号里写的是图片的相对路径
backgr ound-re pe a t 属性值：
repeat-x图像横向平铺
repeat-y图像纵向平铺
repeat图像横向和纵向皆平铺
no-repeat图像不平铺
示例：

body { background-image: url("bg.gif"); 
background-repeat: no-repeat; }

bac kg round-attachment 属性用于指定背景图像是固定在屏幕上的，并随着它所在的元素而滚动。
属性值：
scroll 是默认值，表示图像会跟随页面滚动 fixed 表示图像是固定在屏幕上的

body { background-image: url("bg.gif");
background-repeat: no-repeat;
background-attachment: fixed; }

body { background-image: url("bg.gif"); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: right bottom; }
![

background-color: #FFCC66; 
background-image: url("bg.gif"); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: right bottom;

background-image:linear-gradient(direction,color-stop1,color-stop2,...); .box1 { width: 200px; 
height: 200px; 
background-image: linear-gradient(red, yellow); }

.box1 { width: 200px; 
height: 200px; 
background-image: linear-gradient(to bottom right , red, yellow); }

background-image: radial-gradient(shape size at position, start-color, ..., last-color); 
.box1 { width: 200px; 
height: 200px; 
background-image:radial-gradient(red,yellow,green); }

<ul>
          <li><a href="">确保党始终成为坚强领导核心</a></li>
          <li><a href="">英国新首相别把“对华强硬”当饭吃</a></li>
          <li><a href="">“轩岚诺”来袭，带来何种影响？</a></li> 
          <li><a href="">俄媒：美驻俄大使沙利文离任，离开莫斯科</a></li> </ul>

<nav>
    <ul>
         <li><a href="">确保党始终成为坚强领导核心</a></li>
          <li><a href="">英国新首相别把“对华强硬”当饭吃</a></li>
          <li><a href="">“轩岚诺”来袭，带来何种影响？</a></li> 
          <li><a href="">俄媒：美驻俄大使沙利文离任，离开莫斯科</a></li> 
     </ul>
  </nav>

<style type="text/css"> 
    nav{height: 30px;background-color: #0072C6;} 
    nav ul{list-style: none;} 
    nav ul li{float: left;} </style>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻中心</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.news{
				width: 400px;
				margin-left: 30px;
			}
			.news h2{
				font-size: 20px;
				line-height: 50px;
			}
			.news li{
				line-height: 50px;
				border-bottom: 1px dotted #d1d1d1;
				list-style: url(img/新闻.jpg)inside;
			}
			.news li:last-child{border:none;}
			.news li span{float:right;}
			.news li a{
				color: #000;
				text-decoration: none;
			}
			.news li a:hover{color:#ffa500;}
		</style>
	</head>
	<body>
		<section class="news">
		<h2>新闻中心</h2>
		<ul>
			<li><a href="">确保党始终成为坚强领导核心<span>09-19</span></a></li>
			<li><a href="">英国新首相别把“对华强硬”当饭吃<span>09-21</span></a></li>
			<li><a href="">约翰逊下台后，谁来接班？<span>09-15</span></a></li>
			<li><a href="">“轩岚诺”来袭，带来何种影响？<span>09-17</span></a></li>
			<li><a href="">俄媒：美驻俄大使沙利文离任，离开莫斯科<span>10-06</span></a></li>

		</ul>
		</section>
	</body>
</html>