【小练习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#实现,则会导致过多 ...
随机推荐
- 使用 ItextSharp HTML生成Pdf（C#）
以前生成pdf的时候.因为生成的pdf数据是固定的,所以先做好pdf模板,动态的数据可以先用占位符 生成的时候.找到占位符坐标.把数据填充进去 优点:先做好模板.生成的pdf 表格.文.内容会好看一些 ...
- 浅谈C#数组（二）
六.枚举集合 在foreach语句中使用枚举,可以迭代集合中的元素,且无需知道集合中元素的个数.foreach语句使用一个枚举器.foreach会调用实现了IEnumerable接口的集合类中的Get ...
- ASP.NET MVC4 微信公众号开发之网页授权（二）：通过公众号AppID(应用ID)和AppSecret(应用密钥)取得网页授权openid
ASP.NET MVC4 微信公众号开发之网页授权(一):搭建基础环境 通过了上一篇文章我们已经搭建好了基础开发大环境,现在打开开发环境这里我用的是 vs2013,通过如下方式: 拼接请求链接重定向到 ...
- const常量类型
1.定义:const常量类型表示一个”常值变量“,其值是不能被修改的变量.即一旦变量被声明为const类型,编译器将禁止任何试图修改该变量的操作. 2.声明:const <声明数据类型> ...
- 从网络通信角度谈web性能优化
衡量一个网站的性能有多个指标,DNS解析时间,TCP链接时间,HTTP重定向时间,等待服务器响应时间等等,从用户角度来看,就可以归结为该网站访问速度的快慢.也就是说性能等于网站的访问速度. 早些年Am ...
- 深入tornado中的Configurable
Configurable十分重要! 位于tornado.util文件中,它是一个工厂类. 我们暂且称这个类为 配置类 . 我们暂且约定:该类的子类称之为 直属配置子类 , 该类的孙类.重孙类……称之为 ...
- 微信公众号、H5、APP三者各有什么优势？
昨天给大家分享了一个现在很热的H5,众所周知,当下H5手机网站.微信公众号.APP这三种载体都越来越火了,而且三者都有各自的一些优势和劣势. HTML5(H5) H5之所以能引发如此广泛的效应,根本在 ...
- ORA-01034: ORACLE not available ORA-27101: shared memory realm does not exist
Oracle 设置默认数据库 如果我们的服务器上或者电脑上安装了多个数据库,当我们使用sqlplus时如果为指定数据库时登录到的是哪一个数据库呢?今天遇到了一个老问题: ORA-01034: ORAC ...
- js正则表达式详解
一.正则的两种写法: var re = /a/; //一般情况下都用简写的方式 性能好 var re = new RegExp('a'); //需要传入参数的时候用 二.转义字符: \n 换行 \r ...
- pthread的lowlevellock
pthread的lowlevellock是futex的最简单的锁应用.也是pthread其它同步原语最基本的锁.lowlevellock提供(或实现)了三种锁(方法),一是基于0或1的互斥的锁规则,二 ...