① 这里涉及：无序列表--宽度设置；文本对齐--左对齐；背景颜色--渐变；边框--颜色和圆角；超链接--下划线，字体颜色；鼠标悬浮hover伪类选择器；
② 依据这些知识点复习强化相关练习，就算找书看一个一个慢慢做也可以，那样可以增强知识记忆，自己亲手写过的才是最好的；
③ 个人总结：
我做出来是这样的还有几个问题：
热点新闻出的图片怎么是一排啊？我只要一个。
红点的那排线为什么没有和文字在一排啊，怎么跑下面出去了？
背景颜色怎么控制范围？用div控制？
① 热点新闻出的图片怎么是一排啊？我只要一个。->这个就是要注意设置背景图片background/background-image 时记得写上 background: no-repeat;防止背景图片重复平铺；
② 很重要的：ul列表的亲儿子层级不能有其他标签，要在ul列表放其他标签就必须在它的li元素里面写，比如
xxx
xxx-->
③ 不在一排的问题可能是你的那个红点属于块级元素独占一行；或者是ul列表宽度不够，容不下一个li的宽度；
④ 背景颜色范围控制：background: linear-gradient(to top, white 10%, red 30%, green 70%); 其中的百分数就是代步规定相应的背景颜色所能渲染的范围，你可以试一下；
这是所有的代码了
哎 还是解决不了
这个添加的箭头还是不和文字在一起，而且线还跑到框外面去了
我还加了一条白线，但并没有显示
帮帮我吧。。
温馨提示：答案为网友推荐，仅供参考
第1个回答 2020-09-19
如果一个文件夹不是软件默认的，就需要自己手动去创建
所以，你要在你要存储的磁盘上新建一个文件夹命名为CSS，然后在DW里面创建的CSS文件保存在这个文件夹里面就可以了。
解释的很清楚反而不好，最好自己去实践下！希望帮助到你！
所以，你要在你要存储的磁盘上新建一个文件夹命名为CSS，然后在DW里面创建的CSS文件保存在这个文件夹里面就可以了。
解释的很清楚反而不好，最好自己去实践下！希望帮助到你！
第2个回答 2020-09-19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
padding-bottom: 20px;
margin: 0 auto;
width: 300px;
border: solid 1px #ccc;
border-radius: 5px;
background: linear-gradient(blue,#fff 30%);
}
.title{
font-size: 16px;
border-bottom: solid 1px #fff;
padding: 10px 20px;
}
.new{
padding: 0 30px;
}
.new>li{
border-bottom: #ccc 1px dashed;
padding: 10px 0;
}
.new>li>a{
color: #000;
text-decoration: none;
}
.new>li:hover{
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<p class="title">实时热点</p>
<ul class="new">
<li><a href="">华盛顿大规模游行</a></li>
<li><a href="">任正非卸任副董事</a></li>
<li><a href="">中国IT领袖峰会</a></li>
<li><a href="">欧文手术宣布成功</a></li>
<li><a href="">京城迎最佳赏花期</a></li>
</ul>
</div>
</body>
<script>
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
padding-bottom: 20px;
margin: 0 auto;
width: 300px;
border: solid 1px #ccc;
border-radius: 5px;
background: linear-gradient(blue,#fff 30%);
}
.title{
font-size: 16px;
border-bottom: solid 1px #fff;
padding: 10px 20px;
}
.new{
padding: 0 30px;
}
.new>li{
border-bottom: #ccc 1px dashed;
padding: 10px 0;
}
.new>li>a{
color: #000;
text-decoration: none;
}
.new>li:hover{
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<p class="title">实时热点</p>
<ul class="new">
<li><a href="">华盛顿大规模游行</a></li>
<li><a href="">任正非卸任副董事</a></li>
<li><a href="">中国IT领袖峰会</a></li>
<li><a href="">欧文手术宣布成功</a></li>
<li><a href="">京城迎最佳赏花期</a></li>
</ul>
</div>
</body>
<script>
</script>
</html>
第3个回答 2020-09-19
使用css的background-img实现渐变背景，使用border添加边框，使用:hover添加伪类样式，使用color实现改变字体颜色
相似回答