背景
<head>
<meta charset="utf-8">
<title>背景</title>
<style>
.s1{
height: 500px;
width: 500px;
border: 20px solid red;
//background-image: url(img/logo_05.jpg);/* 背景图 撑不开盒子 在前景图后 */
//background-repeat:no-repeat;/* no-repeat repeat-x repeat-y水平 */
//background-size:100% 100% ;
//background-position: center center;
/* 默认的0px 0px 其他参数top bottom
利用背景 渲染前端 一张图片的不同部分做不同的背景 减轻服务器压力
移动 背景图片不动，显示部分(窗口移动) 上 加 下减，左加 右减
开起来的效果是：窗口上移，图片下移
多张图片作背景， */
background: url(img/icon_21.jpg) no-repeat,url(img/icon_28.jpg) right top no-repeat ;
//background: url(img/back.jpg ) no-repeat ;
/* 背景固定 */
padding: 50px;
background-attachment:fixed ;//固定 fixed 不随div滚动默认：scroll 随div滚动
/* 背景图片 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
/* 背景颜色定位裁剪 */
background-clip: border-box; // 默认
background-clip: padding-box;//内边距里
background-clip: content-box;//内容里
/* origin 改变图片
clip: 改变背景色 */ ;}
</style>
</head>
<body>
<div class="s1">
<!-- <img src="img/logo_05.jpg" alt=""> -->
<p>NBA-里弗斯和76人达成协议 双方签约五年
深度：里弗斯的演讲哲学 顶级主帅们说话的艺术
深度：从球队刺头到争冠拼图 大莫里斯的救赎之路</p>
</div>
</body>
浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 清浮动，在浮动子盒的下面加一个div 加上clear：both*/
/* 在父盒 使用after：{clear：both} */
/* 闭合浮动 */
.f {
/* height: 500px; */
width: 500px;
border: 1px solid #7FFFD4;
}
.s {
/* height: 200px; */
width: 400px;
border: 1px solid #7FFFD4;
/* clear: both; */
}
.fl {
float: left;
}
p::before {
content: '《';
}
p {
font-size: 15px;
/* 斜体 默认normal */
font-style:italic;
/*字体 */
font-family:"Times New Roman";
color:red;
/* 对齐方式 */
/* text-align:center; */
/* text-align:right; */
/* text-align:left; */
/* 两端对齐 */
text-align:justify;
/* 修饰 */
text-decoration:none;
/* 上划线 */
/* text-decoration:overline; */
/* 删除线 */
/* text-decoration:line-through; */
/* 下划线 */
/* text-decoration:underline; */
}
p::after {
content: "》"
}
.clearfix::before,
.clearfix::after {
content: ">>>>";
display: table;
}
.clearfix::after {
clear: both;
}
.clear{
/* clear: both; */
}
</style>
</head>
<body>
<div class="f clearfix">
<div class="s fl">
<p>
Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。 </p>
</div>
<div class="clear s">
<p> </p>
</div>
</div>
</body>
</html>
text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字格式</title>
<style type="text/css">
* {
margin: 0;
}
p {
width: 300px;
height: 200px;
border: 1px solid #7FFFD4;
/* 行高 */
line-height: 20px;
color: #55ff7f;
animation-direction: normal;
direction:rtl;
unicode-bidi: bidi-override;
/* letter-spacing:6px ; */
word-spacing: 7px;
white-space: 6px;
/* 对齐 */
text-align: justify;/* justify 两端对齐 */
text-align-last:center;
/* 装饰 下划线 */
text-decoration: underline ;
text-indent: 20px;/* 缩进 */
/* 大写 */
text-transform: uppercase;
text-transform: capitalize;/* 首 */
text-shadow:;/* 文字阴影 */
}
</style>
</head>
<body>
<p>最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载，不同的打包下载应用于不同的开发者功能与体积的需求，或者您也可以直接下载完整版本；开发环境建议下载源代码版本，包含了常见的错误提示和警告。</p>
<p>adfdsdjkjfsdjfiweujaaaaafjahuangataodfwiabcdefjghakdjfakhgalkjdfljajfjgaljf</p>
</body>
</html>
背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.s1{
height: 500px;
width: 500px;
border: 20px solid red;
background: url(img/icon_21.jpg) no-repeat 9px 400px,url(img/icon_28.jpg) right top no-repeat ;
}
</style>
<body>
<div class="s1">
<!-- <img src="img/logo_05.jpg" alt=""> -->
<p>NBA-里弗斯和76人达成协议 双方签约五年
深度：里弗斯的演讲哲学 顶级主帅们说话的艺术
深度：从球队刺头到争冠拼图 大莫里斯的救赎之路</p>
</div>
</body>
</html>
case 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>360手机页面</title>
<style>
* {
margin: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
.w {
width: 958px;
margin: 0 auto;
}
img {
vertical-align: bottom;
}
.bd {
border: 1px solid red;
}
.header {
height: 55px;
background-image: url(img/back.jpg);
/* background: url(img/back.jpg); */
}
.logo {
padding: 11px 0 0 7px;
}
.nav {
padding: 5px 13px 0 0;
}
/* 浮动子盒撑不开父盒 */
.big {
background-image: url(img/banner_back.jpg);
}
.feather {
width: 285px;
height: 110px;
float: left;
padding-left: 135px;
/* padding-top: 80px */
margin-top: 80px;
}
.main {
margin-bottom: 57px;
height: 617px;
}
.main .feather:nth-child(2n) {}
.main .feather:nth-child(2n+1) {
margin-right: 116px;
}
.back1 {
background: url(img/icon_21.jpg) no-repeat;
background-position: left;
}
.back2 {
background: url(img/icon_23.jpg) no-repeat;
background-position: left;
}
.back3 {
background: url(img/icon_28.jpg) no-repeat;
background-position: left;
}
.back4 {
background: url(img/icon_30.jpg) no-repeat;
background-position: left;
}
.back5 {
background: url(img/icon_35.jpg) no-repeat;
background-position: left;
}
.back6 {
background: url(img/icon_37.jpg) no-repeat;
background-position: left;
}
h4 {
color: RGB(60, 96, 154);
font-size: 28px;
font-family: "宋体";
}
p {
line-height: 20px;
color: RGB(153, 153, 151);
}
/* 以下是尾部 */
.foot {
background-color: RGB(234, 234, 234);
/* 水平居中 */
text-align:center;
/* 垂直居中 */
padding: 20px 0;
}
</style>
</head>
<body>
<div class="header">
<div class="w">
<div class="fl logo"><img class="" src="img/logo_05.jpg" alt=""></div>
<div class="fr nav"><img class="" src="img/nav_05.jpg" alt=""></div>
</div>
</div>
<div class="big">
<div class="w">
<div class=""><img class="" src="img/case22.jpg"></div>
<div class=""><img class="" src="img/case23.jpg"></div>
</div>
</div>
<div class="w main">
<div class="feather back1">
<h4>简洁清新美观</h4>
<p>清新风格更简洁、更美观，百变主题更个性、更抢眼，贴心小工具，丰富新功能，让你的桌面从此与众不同。
</p>
</div>
<div class="feather back2">
<h4>操作简便直观</h4>
<p>长按桌面即可添加更换各种应用、文件夹、小工具，也可方便的选择主题和壁纸为手机换肤，所见即所得的直观操作带来更加简便的使用体验。
</p>
</div>
<div class="feather back3">
<h4>千变万化主题</h4>
<p>海量主题任你选择，在线主题、壁纸内容不断增加中，每日不同的心情，都能找到恰到好处的个性化呈现方式，让手机天天都是精致的表情。
</p>
</div>
<div class="feather back4">
<h4>贴心实用工具</h4>
<p>时钟天气、一键清理、一键节电、日历……不用打开应用，桌面上即可快速进行常用小工具的操作，使用手机更方便，更快捷。
</p>
</div>
<div class="feather back5">
<h4>屏幕手势管理</h4>
<p>双指一捏的合并手势操作即可对屏幕进行可视化操作，可添加多达9屏的屏幕，快速浏览切换屏幕，增减屏幕个数及调整屏幕位置，来体验智能手机的触控乐趣吧。
</p>
</div>
<div class="feather back6">
<h4>个人深度定制</h4>
<p>图标壁纸随意换，划屏特效随心改，小工具大小任意调，深度定制属于你自己的完美桌面，个性创意毫无拘束，手机屏幕就是你的绘画板。
</p>
</div>
</div>
<div class="foot">
<p>Copyright©2005-2012 360.CN All Rights Reserved 360安全中心</p>
<p>隐私权政策 京ICP证080047号</p>
</div>
</body>
</html>
扫一扫
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
