【小练习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="data: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>
【小练习04】HTML+CSS--医药健康小页面的更多相关文章
- 【小技巧】只用css实现带小三角的对话框样式
一个小小的技巧: 如图所示,这种小三角,不用图片,只用css怎么实现呢? 直接上代码吧: <!DOCTYPE html> <html> <head> <tit ...
- 【04】 CSS开发注意事项
[04] CSS注意事项 1. 页面编码规范 1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码. 1.2. 全局字体设置: windows 7系 ...
- 推荐两款PC健康小软件
一.前言 对于经常需要坐在电脑前工作一整天的人来说,健康问题是不得不关注的.下面推荐我一直在用的两款体积非常小(几百KB)的健康小软件,也许可以在无形中保护你.提醒你. 1. FadeTop 这是一款 ...
- 纯CSS实现带小角的对话框式下拉菜单
最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器
今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom 想用jquery 必须先引入(顺序问题) 先css 再js: ...
- 小奶狗给小喵咪上CSS课程
小奶狗给小喵咪上CSS课程 小奶狗,你好啊? 小喵咪你好~ 听说学习HTML,要学习CSS是吗? 是的,小甜心~ 那么CSS是什么呢? CSS是Cascading Style Sheet英文的缩写,中 ...
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- FineUI小技巧（1）简单的购物车页面
起因 最初是一位 FineUI 网友对购物车功能的需求,需要根据产品单价和数量来计算所有选中商品的总价. 这个逻辑最好在前台使用JavaScript实现,如果把这个逻辑移动到后台C#实现,则会导致过多 ...
随机推荐
- mybatis插入List集合数据
处女帖 今天做完一个定时任务将一个表中的数据每天统计到另外一个表中,开始是用循环的方式向数据库添加,觉得数据库可能访问压力过大,所以就使用了mybatis的foreach标签来稍微的减少压力. 首先封 ...
- 使用Eclipse Memory Analyzer Tool（MAT）分析线上故障(一) - 视图&功能篇
Eclipse Memory Analyzer Tool(MAT)相关文章目录: 使用Eclipse Memory Analyzer Tool(MAT)分析线上故障(一) - 视图&功能篇 使 ...
- 通过 bootloader 向其传输启动参数
作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. Linux提供了一种通过bootloader向其传输启动参数的功能,内核开发 ...
- 中美HTML5市场发展的简单对比
1. HTML5的中美发展与应用对比 2014年下半年,HTML5在中国火了.个人用它开展自媒体,散播鸡汤:广告公司靠它做市场营销,从中获利:还有大公司的广告部.企业新媒体部或转型的媒体,利用它进行各 ...
- OC中的copy
copy的概念 Copy的字面意思是"复制"."拷贝",是一个产生副本的过程 对象拷贝的目的:要使用某个对象的数据,但是在修改对象的时候不影响原来的对象内容,常 ...
- hdu698 Just a Hook 线段树-成段更新
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1698 很简单的一个线段树的题目,每次更新采用lazy思想,这里我采用了增加一个变量z,z不等于0时其绝 ...
- 使用Nginx实现Tomcat集群负载均衡
概述 要解决的问题 环境准备以及问题解决思路 配置 测试 小结 一.概述 使用Nginx主要是来解决高并发情况下的负载均衡问题. 二.要解决的问题 1.最主要是负载均衡请求分发. 2.文件上传功能,只 ...
- Java学习笔记——浅谈数据结构与Java集合框架（第二篇、Queue、Set）
江南好,何处异京华. 香散翠帘多在水,绿残红叶胜于花.无事避风沙. --<纳兰词> 诗词再好,大图不能忘 上大图: 先说说栈和队列: 栈就好比手枪的弹匣,你往里面压入子弹,最先压入的子弹就 ...
- angular控制器之间的传值
每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个 ...
- 使用函数指针调用C++虚函数
基本概念: 1. 函数指针,一个地址指针变量,其值指向代码区的某个函数首地址. 2. 虚函数,可以被子类覆写的C++成员函数.由虚函数表实现. 3. 虚函数表指针(vpt),指向虚函数表首地址的指针, ...