欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

【小练习04】HTML+CSS--医药健康小页面

发布时间：2025/3/20 HTML 56 豆豆
生活随笔 收集整理的这篇文章主要介绍了 【小练习04】HTML+CSS--医药健康小页面 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

要求实现如下效果图：

代码演示

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>h1,h2,p{margin: 0;}ul{margin: 0;padding: 0;list-style: none;}a{text-decoration: none;}#box{width: 358px;border: 1px solid #d3c0b1;}.title{height: 35px;background: url(images/title_bg.jpg) no-repeat 8px 13px;}.title h2{font: bold 16px/35px '黑体';text-indent: 26px;display: inline-block;margin-right: 225px;}.title a{color: #626262;font-size: 12px;}h1{height: 40px;font: bold 18px/40px '黑体';padding-left: 17px;}h1 a{color: #c63834;}.first{margin-bottom: 15px;}.img{padding: 6px 13px 0 13px;font-size: 0;}.imgLeft{width: 124px;height: 189px;padding: 4px 4px 2px 4px;background: #a90f03;border: 1px solid #e7e2ce;display: inline-block;margin-right: 14px;}.imgLeft p{font: 12px/16px '宋体';color: #fff;text-align: center;padding-top: 1px;}.imgRight{width: 184px;display: inline-block;}.imgRight p{font: 12px/18px '宋体';color: #999;text-indent: 2em;}.imgRight p a{color: #c6343f;}.imgRight ul{padding-top: 5px;}.imgRight li{height: 24px;font: 14px/24px '宋体';background: url(images/ico_01.gif) no-repeat 3px 10px;padding-left: 16px;}.imgRight li a{color: #030303;}.list{border-top: 1px solid #d5bfb2;padding: 6px 0 0 0;}.list ul{padding: 13px 0 17px 0;font-size: 0;}.list li{width: 179px;height: 24px;font: 14px/24px '宋体';background: url(images/ico_01.gif) no-repeat 10px 10px; text-indent: 22px;display: inline-block;}.list li a{color: #000;}</style></head><body><div id="box"><div class="first"><div class="title"><h2>精彩专题</h2><a href="#">更多>></a></div><h1><a href="#">冬季六节气：冬雪雪冬小大寒</a></h1><div class="img"><div class="imgLeft"><a href="#"><img src="images/img_01.jpg" alt="" /></a><p>冬季六节气之<br />中医宝典</p></div><div class="imgRight"><p>冬季是从立冬日开始，经过小雪、大雪、冬至、小寒、大寒，直到立春的前一天为止。中医认为冬季是藏匿...<a href="#">详细</a></p><ul><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">男人为什么越来越弱</a></li><li><a href="#">天价中药：爱你不容易</a></li><li><a href="#">补中益气之要穴足三里</a></li><li><a href="#">那些不为人知的“群体”</a></li></ul></div></div></div><div class="list"><div class="title"><h2>健康自检</h2><a href="#">更多>></a></div><ul><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li></ul></div><div class="list"><div class="title"><h2>健康自检</h2><a href="#">更多>></a></div><ul><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li><li><a href="#">中医谈武林中的那点事</a></li></ul></div></div></body> </html>

源码地址：http://download.csdn.net/detail/baidu_37107022/9840897

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的【小练习04】HTML+CSS--医药健康小页面的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。