地产小网站(注释版)

honor蔚   发布于 2016年12月10日   阅读次数: 163   我想说两句

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>