CSS——宠物demo
注意:ul中自带padding值,需要清除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul{
background-color: #fff;
height: 279px;
width: 210px;
margin-left: 10px;
padding: 0 15px;
}
li{
height: 30px;
border-bottom: 1px dashed #666;
line-height: 30px;
background: url("tb.gif") no-repeat left center;
padding-left: 16px; }
li a{
text-decoration: none;
}
.box{
width: 260px;
height: 327px;
border: 1px solid #009900;
margin: 10px auto;
background: url("bg.gif");
}
.box .title{
height: 23px;
margin:10px 0 5px 10px ;
border-left: 4px solid #C9E143;
font: 16px/23px 微软雅黑;
color: #fff;
padding-left: 11px; }
</style>
</head>
<body>
<div class="box">
<div class="title">爱宠知识</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>
<li><a href="#">养狗比养猫更健康</a></li>
</ul>
</div>
</body>
</html>
效果:
CSS——宠物demo的更多相关文章
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- 时间轴CSS的Demo
一.CSS代码(HTML5支持) /*time-line.css*/ .timeline { position: relative; padding: 20px 0 20px; list-style: ...
- css小demo
span{ color: #ccc; float: right; font-weight: bold; display: inline-block; border-right: solid 1px # ...
- css sprite demo
一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...
- CSS——行业动态demo
1.padding的运用:子div继承父div的宽,子div的padding-left值是不会撑大的. 2.背景图片的运用:不平铺.定位 3.ul本身就是一个盒子,它的高度是li中的字体的默认高度撑起 ...
- 在线前端 JS 或 HTML 或 CSS 编写 Demo 处 JSbin 与 jsFiddle 比较
JSBin 该编辑器的特点是编写可直接编写 HTML.CSS.JavaScript 并且可以在 output 中实时观察编写效果:可设置自动运行 JavasScript 代码,其中最大的好处是有一个 ...
- css样式DEMO
<!-- 导入框 --> <div id="importWin" class="easyui-window" title="服务封装 ...
- 用CSS制作带图标的按钮
先上一张效果图
- CSS float
我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性 2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮 ...
随机推荐
- RAR5格式不同词典大小下压缩率的简单测试
一个VMWare虚拟机安装Win7后的磁盘文件进行压缩,已经进行了清理处理,原始大小为12.1GB 词典大小 压缩后大小 压缩比率 32MB 4.08GB 33.7% 256MB 3.88GB 3 ...
- mybatis表关联彻底理解
1.多张表关联 三张表,用户表,主播表,关注表. 查询用户已经关注的主播的信息,那就要三张表关联起来啊.分别left join联在一起,通过id相同的连接在一起.最后where查找出最终条件. < ...
- matlab初试牛刀__小练习
% T1 % 最好还是设 h=2 D=1 clear,clc; h=2;D=1; x=-2*D:0.01:2*D; y=h*(x>D)+h/D.*x.*(abs(x)<=D)-h*(x&l ...
- C# Json反序列化 C# 实现表单的自动化测试<通过程序控制一个网页> 验证码处理类:UnCodebase.cs + BauDuAi 读取验证码的值(并非好的解决方案) 大话设计模式:原型模式 C# 深浅复制 MemberwiseClone
C# Json反序列化 Json反序列化有两种方式[本人],一种是生成实体的,方便处理大量数据,复杂度稍高,一种是用匿名类写,方便读取数据,较为简单. 使用了Newtonsoft.Json,可以自 ...
- 【源代码剖析】tornado-memcached-sessions —— Tornado session 支持的实现(二)
客官您最终回头了! 让我们本着探(zuo)索(si)精神把 session.py 看完吧... 首先看看须要的库: pickle 一个用于序列化反序列化的库(听不懂?你直接看成和 json 一样作用即 ...
- ios11--播放音效
// // ViewController.m // 10-iOS中播放音效 // // Created by xiaomage on 15/12/26. // Copyright © 2015年 小码 ...
- Android Studio报错:DefaultAndroidProject : Unsupported major.minor version 52.0
今天使用Android Studio 2.0打开我之前的项目时,编译报了如下错误: Error:Cause: com/android/build/gradle/internal/model/Defau ...
- cf 749D Leaving Auction
Leaving Auction time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- 【Angular】过滤器
AngularJS学习笔记 {{ name | uppercase}} {{ 123.456789 | number:2 }} app.controller('DemoController', ['$ ...
- openstack service glance-api/registry mysql of max_connection