CSS板块练习代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.main{
width: 400px;
height: 500px;
background-color: #eee;
padding: 20px;
font-family: Arial;
}
.div1,.div2,.div3{
/*width: 400px;*/
height: 120px;
background-color:#fa1;
}
.div2,.div3{
margin-top: 20px;
}
.div1>img{
/*width: 150px;*/
float: left;
/*margin-top: 100px;*/
}
.div1>div{
width: 240px;
height: 92%;
background-color: #faa;
float: right;
padding-top: 10px;
padding-left: 10px;
}
.div1>div>h5{
font: 18px Arial;
margin: 0px;
}
.div1>div>p{
width: 210px;
margin: 0px;
/*overflow: hidden;*/
word-break:break-all;
padding-bottom: 4px;
border-bottom:1px solid #bbb;
}
.samll{
width: 90%;
height: 35px;
background-color: #fff;
}
.samll>strong{
font-size: 24px;
font-weight: 900;
float: left;
margin-top: 3px;
}
.sp{
padding: 4px 9px;
background-color: #A3C809;
border-radius: 3px;
margin-left: 39px;
float: left;
margin-top: 5px;
cursor: pointer;
}
.sp span{
padding: 0px 6px;
font-weight: bolder;
background-color: #567611;
border-radius:100%;
color: #fff;
float: left;
}
.samll span button{

}
</style>
</head>
<body>
<div class="main">
<div class="div1">
<img src="1.jpg">
<div>
<h5>KIch 好的呵呵</h5>
<p>fbefhuriewhgiouergbouierbhuiotbo
jkewqflu</p>
<div class="samll">
<strong>1248$</strong>
<a href="www.djkewcfu.com" class="sp"><span>i</span></a>
</div>
</div>
</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>

时间: 2025-01-10 19:24:01

CSS板块练习代码的相关文章

js css样式操作代码(批量操作)

js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09 用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率. 我们用js书写css样式通常会用下面的两种方式: 一般情况下我们用js设置元素对象的样式会使用这样的形式: 复制代码 代码如下: var element= document.getElementById(”id”); element.style.width=”20px”; element.style.he

css清除浮动代码实例演示

css清除浮动代码实例演示:在页面中如果采用了浮动,那么清除浮动则是必须要进行的操作,否则可能引起一些意想不到的后果.本章节不会对浮动或者清除浮动的原理做介绍,只是分享一下清除浮动的几段代码,因为有些朋友可能需要的就是一个代码实例,关于浮动或者清除清除浮动的相关内容可以参阅相关阅读.一.使用overflow清除浮动: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <met

div+css通用兼容性代码整理

一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} 复制代码 代码如下: <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */

去掉CSS赘余代码,CSS可以更简洁

本篇文章适合css新手学习,对于已经掌握了css的朋友们也可以通过本片文章来复习知识. 作者通过实践,认为在有些情况下css的代码是可以更加简洁的,多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的. 精简的代码对于网页是有莫大的好处的,对于浏览者访问速度会有一定的提升,另外对于搜索引擎也更加可以抓取网页关键内容.废话不说了,下面就看看笔者总结的可以精简的代码: 1.Margin & Padding 例1: .div { margin-top:10px; margin-right

用JavaScript修改CSS属性的代码

用JavaScript修改CSS属性的代码 作者: 字体:[增加 减小] 类型:转载 时间:2013-05-06我要评论 这篇文章主要介绍用原生的javascript修改CSS属性的方法,需要的朋友可以参考下 用JavaScript修改CSS属性 只有写原生的javascript了. 1.用JS修改标签的 class 属性值: class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法. 更

CSS初始化示例代码

CSS初始化示例代码 /* css reset www.admin10000.com */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } body { background:#fff; color:#555; font-size:14px; font-family

css黑火狐代码

已经亲测了,找这个代码好苦啊,由于bilibili只能上传一个css,找了半天css hack,很多失效了,很多用法不明确,还有很多停留在上世纪的IE 5.0...... 因为自己做的css在webkit下非常棒,但是firefox下不尽如人意,因此想黑掉火狐 代码: @-moz-document url-prefix(){ #example{} } css黑火狐代码

前端CSS和JS代码风格规范

1:不要轻易改动全站级CSS和通用CSS库.改动后,要经过全面测试. 2:css的id,class 名称 语义化,   以 - 相连,   命名少用缩写(除一些所有人一看便知的缩写); 3: Javascript命名规则 3.1:私有变量名用下划线开头; eg: _this = $(this); 3.2:变量名--驼峰命名法; eg: regEmail; 3.3:格式化对象参数;   eg: $.ajax({ type : 'post', url : '/auth/sendCode', data

CSS标签切换代码

DIV CSS布局实例:CSS标签切换代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <