【小练习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#实现,则会导致过多 ...
随机推荐
- How to trace the Geolocation of network traffic
A case about suspicious malware App. A forensic examiner capatured some pcap files and he'd to know ...
- D3D中一些接口的变化和VS配置关联的方法
一.一些改变 #include <xnamath.h> 改为了 #include <DirectXMath.h> 二.vs关联 步骤: 1.选择工程的Properties, 2 ...
- jdk动态代理与cglib代理、spring aop代理实现原理解析
原创声明:本博客来源为本人原创作品,绝非他处摘取,转摘请联系博主 代理(proxy)的定义:为某对象提供代理服务,拥有操作代理对象的功能,在某些情况下,当客户不想或者不能直接引用另一个对象,而代理对象 ...
- effective c++ 思维导图
历时两个多月的时间,终于把effective c++又复习了一遍,比较慢,看的是英文版,之前看的时候做过一些笔记,但不够详细,这次笔者是从头到尾的翻译了一遍,加了一些标题,先记录到word里面,然后发 ...
- Lucene工作原理
Lucene是一个高性能的java全文检索工具包,它使用的是倒排文件索引结构.该结构及相应的生成算法如下: 0)设有两篇文章1和2 文章1的内容为:Tom lives in Guangzhou,I l ...
- PPT要你好看---读书笔记
PPT要你好看.主要是设计的思维. 下图,对于现阶段的我来说,收获最大的是毕业答辩PPT的制作. 以及整体的PPT制作思路.
- Laravel 5.2 教程 - 队列
一.简介 Laravel 队列组件提供一个统一的 API 集成了许多不同的队列服务,队列允许你延后执行一个耗时的任务,例如延后至指定的时间才发送邮件,进而大幅的加快了应用程序处理请求的速度. 由于本例 ...
- sdkman安装
软件开发工具管理包(Software Development Kit Manager,简称SDKMAN) 用来管理多个版本的开发环境的工具.提供命令行来安装.切换.删除.列出候选版本. 官网地址:ht ...
- CSS垂直和水平居中
在css中,居中使用十分频繁. 居中分为水平和垂直居中 水平居中十分简单: body{ background:#f90; } body统一为这个颜色 div { margin:0 auto; back ...
- 使用 Laravel 实现微型博客系统
参考链接:An Introduction to Laravel Authorization Gates 这个微型博客系统包含两个用户角色(作者 和 编辑),它们的权限如下: 作者能创建博客 作者能更新 ...