爱站程序员基地网页新闻列表
重点：如何使用行内块元素
`“css
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>网易新闻列表</title><link rel=\"stylesheet\" href=\"../CSS/默认样式去除.css/reset.css\"><style>body {background-color: bisque;}/* 设置总体框架的大小及位置 */.zongti {width: 300px;height: 323px;background-color: #ffffff;margin-top: 50px;margin-left: auto;margin-right: auto;border-top: 1px solid #ddd;}/* 去除超链接中的下划线 */a {text-decoration: none;}/*设置标题 样式*/.biaoti {/* 为了边框和文字宽度一致，需要将标题标签转换为行内块元素*/display: inline-block;/*设置上边框 */border-top: 1px red solid;/* 通过margin-top 将标题样式向上移，盖住上边框*/margin-top: -1px;/*文字加粗*/font-weight: bold;height: 41px;font-size: 16px;line-height: 41px;color: #888888}/* 设置标题中span的样式 */.biaoti span {font-size: 16px;color: #888888;}/* 设置标题当中的超链接样式*/.biaoti a {color: #404040;font-size: 16px;}/* 设置鼠标移入标题中的超链接时的状态 */.biaoti a:hover {color: red;}/* 设置图片的样式 */.tupian {width: 300px;height: 150px;background-color: #ffffff;}/* 设置图片中的文字效果 */.imgwenzi {margin-top: -30px;margin-left: 30px;color: #fff;}/* 设置鼠标移入列表中的超链接时的状态 */.liebiao a:hover {color: red;}/* 设置新闻列表的样式 */.liebiao {width: 285px;height: 30px;line-height: 30px;color: #dddddd;}/* 设置列表前的 ■ */.liebiao li::before {content: \"■\";color: rgb(218, 218, 218);font-size: 5px;margin-left: 10px;}/* 设置列表中超链接的样式 */.liebiao a {padding: 15px;font-size: 14px;color: #666666;}</style></head><body><div class=\"zongti\"><div class=\"biaoti\"><a href=\"#\"></a><a href=\"java\" target=\"blank\">健康</a><span>·</span><a href=\"java\" target=\"blank\">读书</a></div><div class=\"tupian\"><a href=\"java\" target=\"blank\"><img src=\"./图片文件夹/04.webp\" alt=\"高考\"></a><!-- 创建图片标题 --><div class=\"imgwenzi\">2020疫情下的高考</div></div><ul class=\"liebiao\"><li><a href=\"java\" target=\"blank\">为孩子辞职在家 丈夫却另寻新欢</a></li><li><a href=\"java\" target=\"blank\">拒绝购买iPhoneX 女友提出分手</a></li><li><a href=\"java\" target=\"blank\">内蒙古鼠疫疫点 一图带你了解鼠疫</a></li><li><a href=\"java\" target=\"blank\">别再着急“趁热吃” 当心患上食管癌</a></li></ul></div></body></html>
