【小练习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#实现,则会导致过多 ...
随机推荐
- Virtualbox 复制 CentOS 虚拟机无法联网
Centos刚装好后无法联网 复制虚拟机后,出现 No such device eth0 我们要处理的三个问题: 在Virtualbox上安装好Centos后如何联网 如何在Virtualbox上复制 ...
- IntelliJ IDEA应用[一]下载与安装
一.IntelliJ IDEA 12.1.6的下载 IntelliJ IDEA的官方下载网站:http://www.jetbrains.com/idea/download/
- std::thread使用
本文将从以下三个部分介绍C++11标准中的thread类,本文主要内容为: 启动新线程 等待线程与分离线程 线程唯一标识符 1.启动线程 线程再std::threada对象创建时启动.最简单的情况下, ...
- html基础认识，高手别看
HTML5是一种用于在万维网上构建和呈现内容的符号言语.它是HTML规范的第五和当时版别.它是由万维网联盟(W3C)在十月发布的2014 [ 2 ] [ 4 ]和最新的多媒体支持进步言语,一起坚持它简 ...
- Vue 普通对象数据更新与 file 对象数据更新
最近在做一个多图片上传的组件,需求是做到多文件依次上传,并显示上传进度条. 逻辑部分实现了以后,在更新进度条视图的时候出现一点问题:动态计算生产的进度 progress 属性不会自动更新. 原来的代码 ...
- 对于Bootstrap的介绍以及如何使用
Bootstrap是HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 可以自动适配任何设备,解决了响应式实现的繁琐问题,可以修改其中的各种样式,同样,其内部功能的强 ...
- 基于django做HTTP代理服务器
计算机网络的一次小实验,最后一共用了不到100行 实现了: a) 网站过滤:允许/不允许访问某些网站: b) 用户过滤:支持/不支持某些用户访问外部网站: c) 网站引导:将用户对某个网站的访问引导至 ...
- Spring Boot Dubbo applications.properties 配置清单
摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 与其纠结,不如行动学习.Innovate ,And out execute ! 』 本文 ...
- [原创]JS实现数据筛选(each)
做列表的时候,有时候需要按照某些条件进行查询,如班级,分组之类.但是又不想在重新从服务器获取数据,可以进行隐藏
- Centos程序最小化后，窗口标签都消失找不到窗口的问题
我是用的centos版本是CentOs 7. 在“顶部面板”或者 “底部面板” 右击选择“添加组件”),如下图所示: 在搜索框里输入“窗口列表”(window list),选中“窗口列表”即可.如下图 ...