利用 HBuilderX 设置新闻中心版式

听风者i

已于 2024-05-13 08:56:55 修改

阅读量3.2k

点赞数 1

分类专栏： HBuilderX 文章标签： html css css3 1024程序员节 web

于 2022-10-10 13:17:07 首次发布

本文链接：https://blog.csdn.net/weixin_67632468/article/details/127235561

版权

HBuilderX 专栏收录该内容

8 篇文章 5 订阅

订阅专栏

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标题的背景色
background-image属性

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

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

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

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

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

background-position属性：
background-position属性值：可以是以百分比或固定单位（比如像素、厘米等）；也可以是“top”、“bottom”、“center”、“left”和“right”这些值。

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

background属性：

background属性是所有与背景有关的属性的缩写用法。

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

注：属性值顺序： [background-color] | [background- image] | [background-repeat] |[background-attachment] | [background-position] 如果省略某个属性不写出来，那么将自动为它取默认值。
渐变背景：

渐变的背景效果通常使用background-image属性来设置，渐变又通常分为线性渐变与径向渐变。
线性渐变：
线性渐变语法

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

注：direction属性值可以设置为：to right（从左到右），to bottom right(从左上角到右下角)等。

.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); }

在这里插入图片描述

list-style-type属性：

修改列表项的标志类型

在这里插入图片描述

注：列表项标志的图片背景色最好设置为透明色，所以图片格式只能为gif或者png格式

list-style-position 属性：

确定列表标志出现在列表项内容之外还是内容内部
在这里插入图片描述
list-style属性（简写属性）

属性值的顺序为：list-style-type、list-style-position、list-style-image。
在这里插入图片描述

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

超链接样式：
超链接的特殊性在于能够根据它们所处的状态来设置它们的样式，超链接的四种状态：在这里插入图片描述

超链接的四种状态设置次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
注：在实际开发中，经常将超链接的样式简化为设置a和a:hover这两种状态的样式。

<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>