Tag: 排版 样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>康桥地产</title>
<style>
body{
/*设置的目的是为了消去边距*/
/*div默认的起始位置不是真正的原点位置*/
/**/
margin:0px;
}
img{
/*如果不设置图片的大小，那么浏览器会默认查找图片自身的大小，
然后平铺到页面*/
/*以后设置背景图的时候，最好设置为百分比*/
/*一般设置宽度就行*/
width:100%;
/*内联标签如果想修改他的显示样式的话，需要修改他的display标签
每一个网页内的的显示标签都有一个display属性
行内标签的默认属性值：in-line
块元素默认值：block-level
默认情况下，行内元素修改宽高都是无效的，需要进行强制转化才能修改*/
display:block;
}
section{
position:relative;
}
span{
/*设置背景色*/
/* 光的三原色 红绿蓝；水彩笔三原色 红黄蓝*/
background-color: #000000;
/*设置文字颜色*/
color: white;
/*调整位置*/
position: absolute;
top:50px;
left:0px;
/*padding设置内边距 margin是设置外边距*/
/*padding-top:10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px; */
/*一个值：上下左右 ；两个值：上下 左右 ；三个值：上 左右 下 ； 四个值：上右下左 */
padding: 10px 30px;
/*设置边角的圆角*/
/*上右和下右单词顺序不能写反*/
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
</style>
</head>
<body>
<!--指网页中某一个模块
一般使用在列表展示的类型中-->
<section>
<!--alt如果图片没有加载出来的话就显示文字-->
<!--添加超链接-->
<!--超链接可以添加图片，不仅只是文字-->
<!--<a href="http://www.taobao.com">-->
<a href="Untitled-2.html">
<img src="Image/jxj.jpg" alt="这是第一个图片">
<span>
康桥西元前
</span>
<!--
span是一个行内标签(横向排列) in-line 内联元素
span标签定义的是行内某个模块的区域
网页内同一行可以被span标签化分为几个区域
最大特点是 不会独占一行
一般使用span标签是用来标记行内文字使用
span标签：内联标签
例如：<a> <b>加粗 <img>
div标签：块元素标签
block level element元素
例如：<h1> <p> <ul> <ol>
-->
<!--<span>
span是干嘛用的
</span>
<span>
这是第二个span
</span>
<div>
这是DIV标签1
</div>
<div>
这是DIV标签2
</div>-->
</a>
</section>
<!--这是第二个区间-->
<section>
<a href="#">
<img src="Image/yxl.jpg" alt="这是第二个图片">
<span >
康桥春晖园
</span>
</a>
</section>
<!--这是第三个区域-->
<section>
<a href="#">
<img src="Image/yd.jpg" alt="这是第三个标签">
<span >
康桥无名湖
</span>
</a>
</section>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>
地产详情
</title>
<style>
body{
width: 100%;
height: 100%;
/*添加图片*/
background-image: url(Image/xt.jpg);
/*图片重复*/
background-repeat: no-repeat;
/*图片的大小*/
background-size: 100% 100%;
}
ul{
/*列表前面的符号的类型*/
/*dic 实心圆 circle 空心圆 什么都没有： none 方块：square*/
list-style-type: none;
margin-top: 80px;
}
li{
/*设置外边距*/
margin-bottom:100px;
/*添加动画*/
animation-name:donghua;
/*动画时间*/
animation-duration: 2s;
/*设置动画的填充位置是设置的起始位置，而不是原来图片的位置
告诉图片跑到起始点 准备开始动画
动画结束后就停留在设置的结束位置*/
animation-fill-mode: both;
}
/*设置文字*/
a{
color: white;
background-color: black;
/*设置透明度*/
opacity: 0.7;
/*无下划线*/
text-decoration: none;
/*设置外边距*/
padding-top: 20px;
padding-right:60px;
padding-bottom:20px;
padding-left:40px;
/*设置圆角*/
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
/*添加小箭头图片*/
background-image: url(Image/right-arrow.png);
/*是否重复 不要重复*/
background-repeat: no-repeat;
/*修改小箭头位置*/
/*设置位置在中心点 但是如果加入百分数是指当前元素在整个块元素中的位置*/
/*background-position: right;*/
background-position: 90%;
/*修改小箭头大小*/
background-size: 8px 15px;
}
/*设置延时*/
li:nth-child(1){
/*延时 delay*/
animation-delay: 0s;
}
li:nth-child(2){
animation-delay: 0.5s;
}
li:nth-child(3){
animation-delay: 1s;
}
li:nth-child(4){
animation-delay: 1.5s;
}
li:nth-child(5){
animation-delay: 2s;
}
@keyframes donghua{
/*transform 矩阵*/
/*平移动作只修改X值*/
0%{
/*平移：translate*/
/*一般都是传入百分比*/
transform: translate(-100%,0);
}
100%{
transform: translate(0,0);
}
}
/*利用子标签选择器也可以查找标签中的某一个元素*/
li:nth-child(3) a{
padding-right: 100px;
}
li:nth-child(4) a{
padding-right: 50px;
}
li:nth-child(5) a{
padding-right: 100px;
}
/*ol{
list-style-type:upper-latin;
}*/
</style>
</head>
<!--ul 无序标签 ul是一个无序的列表 ul前边没有序号
ol 有序标签 有序 有序号
li 指的是表中的一排内容-->
<body>
<ul>
<li>
<!--#是为了告诉浏览器，这是一个超链接-->
<a href="#" style="padding-right:30px">楼盘详情</a>
</li>
<li>
<a href="#" style="padding-right:50px">全景户型</a>
</li>
<li>
<a href="#" >项目图册</a>
</li>
<li>
<a href="#">预约看房</a>
</li>
<li>
<a href="#">房贷计算器</a>
</li>
</ul>
</body>
</html>