2021-09-18

最新推荐文章于 2023-04-04 18:58:50 发布

苦难陈述者12138

最新推荐文章于 2023-04-04 18:58:50 发布

阅读量720

点赞数 3

文章标签： css html html5

本文链接：https://blog.csdn.net/yyds12148/article/details/120367706

版权

制作一个京东快报（简易版

题目要求:

在这里插入图片描述

创建html文件：

将html与css进行关联：

*1.创建盒子标签(html)：*

*创建盒子标签(css)：*

按照题目要求

宽度230px，边框宽度为1px，颜色是灰色实线

.box{

border: 1px darkgray solid; 边框宽度为1px，颜色是灰色实线

width: 230px; 宽度230px

margin: 30px; 外边距30px

box-sizing: border-box;}

*2.标题（Html）：*

<div class="title">京东快报</div>

*标题（css）：*

.title{

height: 40px;

/* 文字垂直居中 */

line-height: 40px;

/* 左内边距 */

padding-left: 13px;

/* 渐变色 */

background: linear-gradient(to bottom, #CDCDFF,white);

/* 下边框 */

border-bottom: 1px dashed gray;

}

3. *内容（html）：*

[特惠]
[公告]
[特惠]
[公告]

Css：

.list{

font-size: 12px;

list-style: none;

padding: 0px;

margin: 0px;

}

.list li{

padding-left: 13px;

padding-right: 13px;

line-height: 26px; }

.list a{

text-decoration: none;

color: black;}

.list a:hover{

color: darkred; }

*3最后的成果：*
在这里插入图片描述

4. *代码：*

*html：*

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/yyds.css" />
	</head>
	<body>
		<div class="box">
			<div class="title">京东快报</div>
			<ul class="list">
				<li><a href="#"><b>[特惠]</b>海飞丝去屑又去油 超清爽</a></li>
				<li><a href="#"><b>[公告]</b>京东公益支持鲁甸新动作</a></li>
				<li><a href="#"><b>[特惠]</b>4688元抢iPhone 6</a></li>
				<li><a href="#"><b>[公告]</b>小米电视携豪礼高调入驻京东</a></li>
			</ul>
		</div>
   </body>
</html>

*Css*

.box{
	border: 1px darkgray solid;
	width: 230px;
	margin: 30px;
	box-sizing: border-box;}
.title{
	height: 40px;
	line-height: 40px;
	padding-left: 13px;
	background: linear-gradient(to bottom, #CDCDFF,white);
    border-bottom: 1px dashed gray;	}
.list{
	font-size: 12px;
	list-style: none;
	padding: 0px;
	margin: 0px;}
.list li{
	padding-left: 13px;
	padding-right: 13px;
	line-height: 26px;}
.list a{
	text-decoration: none;
	color: black;}
.list a:hover{
	color: darkred;}

苦难陈述者12138

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
2021-09-18

制作一个京东快报（简易版题目要求:创建html文件：将html与css进行关联：*1.创建盒子标签(html)：**创建盒子标签(css)：*按照题目要求宽度230px，边框宽度为1px，颜色是灰色实线.box{border: 1px darkgray solid; 边框宽度为1px，颜色是灰色实线 width: 230px; 宽度230px margin: 30px; 外边距30px box-sizing: border-box;}*2
复制链接

扫一扫