Html/Css整理(1)

 

 

 

 


--- * --- * --- * --- * --- * --- * --- * --- * --- * ---

/* 运用能实现一些滚屏换图 */
CSS background-attachment 属性
如何设置固定的背景图像：
如果在div中定义 attachment 则能出现div中 小‘滚屏’效果
body {
background-image: url(bgimage.gif);
background-attachment: fixed;
}

 

--- * --- * --- * --- * --- * --- * --- * --- * --- * ---

/* 背景图片居中 */
body {
height:3000px;
background-image:url(img/dg.jpg);
background-repeat:no-repeat;
background-position:center 0;
background-attachment:fixed;
}

 

--- * --- * --- * --- * --- * --- * --- * --- * --- * ---

/* css3 transition 场景过渡动画使用 */
transition: 1s;

 

--- * --- * --- * --- * --- * --- * --- * --- * --- * ---

/* border 边框的复合样式*/
#div1 {
border-top:50px solid red;
border-left:50px solid yellow;
border-bottom:50px solid blue;
border-right:50px solid green;
background:#f1f1f1;
}

 

--- * --- * --- * --- * --- * --- * --- * --- * --- * ---
思路: 结构 - 样式
一个简单的对话框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box {
width:300px;
height:215px;
}
#title {
width:114px;
height:29px;
border-top:2px solid #206f96;
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
background:url(img/title-bg.gif);
}
#content {
width:298px;
height:182px;
border:1px solid #cfcfcf;
}
#content-1 {
width:298px;
height:57px;
background:url(img/mail.gif) no-repeat 16px 25px;
}

#content-2 {
width:298px;
height:125px;
background:#f7f7f7 url(img/mouse.gif) no-repeat 9px 51px;
}
</style>
</head>

<body>

<div id="box">
<div id="title"></div>
<div id="content">
<div id="content-1"></div>
<div id="content-2"></div>
</div>
</div>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2018-08-02 11:50  silvercell  阅读(1381)  评论(0)    收藏  举报