一、anchor伪类，用于阅读文章。

a:link(没有接触过的链接),用于链接常规状态 （末访问的链接）
a:hover(鼠标放在链接上的状态) 用于产生视觉效果（已访问的链接）
a:visited(访问过的链接)能清楚判断已经访问的链接（鼠标移动的链接）
a:active(在连接上按下鼠标是的状态)，用于表现鼠标按下是的链接状态（选定的链接）

二、before after伪类
：before p:before 在每个<p>元素之前插入的内容
：after p:after 在每个<p>元素之后插入的内容

三、css的优先级

如果有 !import那么它的优先级最大
1、style="-----------1000"; 内敛样式表的权值最高
2、#id---------------100; 统计选择符中ID的属性个数
3、.class------------10; 统计选择符中的class属性个数
4、p------------------1; 统计选择附中的HTML标签个数

四、水平对齐方式
text-align属性规定元素中的文本的水平对齐方式

left 把文本排列左边

right 把文本排列右边

center 把文本排列中间

justify 实现两端对齐文本的效果

line-height:200px; 文本行高

vertical-align :-4px; 元素内容垂直对齐方式，只对行内的元素有效，对块级元素无效

text-decoration:none 去掉拆链接的下划线

text-decoration:underline 设置超链接下划线

letter-spacing:10px; 字母间距

word-spacing:20px; 单词间距

五、外边距和内边距

margin：控制元素与元素之间的间距

padding： 用于控制内容与边框之间的距离

border： 围绕在内边距和内容外的边框

content: 盒子内容，显示文本和图像

margin：外边距属性
margin-top: 上边距
margin-bottom: 下边距
margin-right: 右边距
margin-left: 左边距

居中应用：
margin：0 auto:

六、背景属性
属性介绍：
backgroud-color 背景颜色
backgroud-image：url(图片位置) 背景图片
backgroud-position 背景定位

七、边框属性
border-width:20px;
border-style(required):solid;
border-color:chartreuse;

border-right:solid red 2px;   向右设置边框

简写：border:30px red solid;

边框-单独设置各边
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

八、列表属性
list-style-type 设置列表项标志的类型
list-style-image 将图像设置为列表项的标志
list-style-position 设置列表中列表项标志的位置

 

九、diaplay属性
diaplay:inline; 转换内敛标签
diaplay:block; 转换块级标签
diaplay:inline-block;
diaplay:none;

visibility: hidden;    隐藏

边距的塌陷问题

float浮动

十、清除浮动
clear： 清除浮动只对自身起作用

clear：none 默认值，允许两边可以有浮动现象

clear：left 不允许左边有浮动（对自身起作用）

clear：right 不允许右边有浮动

clear：both 两边都没有浮动

十一、float; 半脱离文档流
position：fixed; 固定定位，完全脱离文档流
position:relative; 以自己原位置作为参照物，可以使用top,left ，相对定位,没有脱离文档流
position:absolute 完全脱离文档流，已经定位的父级作为参照物

十二、补充

常见的块级元素有：div,form,table,p,pre,h1--h5,dl,ol,ul
常见的内敛元有:span,a,strong,em,label,input,select,img,br

 

list-style:none; 去掉列表默认样式
no-repeat 0px,4px; 不重复
transition-duration:0.5s; 设置过渡时间
border-radius: 50%; 设置边框圆角
overflow：hidden 超出的部分要裁剪隐藏
opacity: 设置透明

disc 圆心  ，   circle  空心圆，   square 实心块    &nbsp  空格

solid   实线，   dashed  虚线

 <title>登录页面</title>

    <style>

        .top{

        }

        .outer{

             border:1px solid lightslategray;

             height: 400px;

             width: 1350px;

            background-color: red;

        }

        .outer .left{

            height: 400px;

            width: 800px;

            float: left

        }

        .outer .right{

            margin:0px;

            padding-top: 30px;

            padding-left:50px;

            line-height: 40px;

            height: 400px;

            width: 500px;

            float: left;

        }

        .boutn{

            text-align: center;

             /*align-content: center;*/

            color: black;

            /*background-color: red;*/

        }

    </style>

</head>

<body>

<div class="top">

    <img src="logo.png" >

</div>

<div class="outer">

    <div class="left">

        <img src="meilele.png" width="700" height="400">

    </div>

    <div class="right">

        <from action="" method="post">

        <p>*用户名：<input type="text" name="username" value=""></p>

        <p>*密&nbsp;&nbsp;&nbsp码：<input type="password" name="password" value=""></p>

        <p>*验证码：<input type=" Code" name=" Code" value="" ></p>

         <p> <input type="checkbox" name="loge" value="loge" checked="checkbox">自动登录

               <a href="">忘记密码?</a></p>

        </from>

        <p><a href="" style="height:20px;text-align: center; line-height: 5px;">登录</a></p>

        <p><a href="注册页面.html" style="padding-left: 410px">免费注册>></a></p>

    </div>

</div>

<div class="boutn">

<span>2014-2015|www.autohome.com.cn |All Right Roserved.xxxxx|@版权所有</span>

</div>

</body>

</html>

登录作业

 <title>注册页面</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .top{

            width:100%;

            height:40px;

            background-color: gray;

        }

        .top .top_shoucang{

            padding-left:200px;

            padding-top: 15px;

            float: left;

        }

        .top .top_loge{

            word-spacing: 15px;

            padding-right: 200px;

            padding-top: 15px;

            float: right;

        }

        .head{

            width: 950px;

            height:60px;

            margin: 8px auto;

            /*padding-left:200px;*/

            /*float: left;*/

        }

        .bod{

             margin: 8px auto;

            background-color: red;

            border: 5px solid gray;

            /*width: 1350px;*/

            width: 950px;

            height:460px;

        }

        .bod .left{

            /*background-color: black;*/

            padding-top: 20px;

            /*width: 500px;*/

            width: 400px;

            height:500px;

            line-height:50px;

            /*padding-left:200px;*/

            padding-left:200px;

            float: left;

        }

        .bod .left_top{

            color: blue;

        }

        .bod .right{

            width: 200px;

            height:400px;

            padding-top: 60px;

            /*padding-right:200px;*/

            padding-left:100px;

            /*float: left;*/

            float: left;

            line-height:80px;

        }

        .boutn{

            padding-left:70px;

        }

    </style>

</head>

<div>

<div class="top">

    <div class="top_shoucang">

        <p><a href="">*收藏本站</a></p>

    </div>

    <div class="top_loge">

        <a href="">登录</a>

        <a href="">免费注册</a>

        <a href="">我的订单</a>

        <a href="">vip会员俱乐部</a>

        <a href="">客户服务</a>

    </div>

</div>

<div class="head">

    <img src="logo.png" >

</div>

<div class="bod">

    <div class="left">

        <caption><b>注册新用户</b></caption>

        <from action="" method="post">

        <p>*&nbsp;&nbsp;&nbsp用户名：<input type="text" name="username" value=""></p>

         <p>*&nbsp;&nbsp;&nbsp手机号：<input type="phone" name="phone" value=""></p>

        <p>*登录密码：<input type="password" name="password" value=""></p>

        <p>*验证密码：<input type="password" name="password" value=""></p>

        <p>*&nbsp;&nbsp;&nbsp验证码：<input type=" Code" name=" Code" value="" ></p>

            <p> <input type="checkbox" name="loge" value="loge" checked="checkbox">现已阅读并同意

               <a href="">(用户注册协议)</a></p>

        </from>

        <div class="left_top" >

        <p><input type="submit" value="同 意 以 上 协 议 并 注 册"></p>

    </div>

    </div>

    <div class="right">

        <p> <input type="checkbox" name="loge" value="loge" checked="checkbox">我已注册，现在就

               <a href="登录页面.html">登录</a></p>

        <img src="youhui.gif" >

    </div>

</div>

</div>

<div class="boutn" style="text-align: center;margin-left: -500px;float: left">

    <a href="">2014-2015|www.autohome.com.cn |All Right Roserved.xxxxx|@汽车之家|版权所有</a></div>

</body>

</html>

注册作业

前端之基础css的更多相关文章

  1. 前端零基础 --css转换--skew斜切变形 transfor 3d

    前端零基础 --css转换--skew斜切变形 transfor 3d==============重要不紧急! 重要紧急 重要不紧急 不重要紧急 不重要不紧急

  2. 前端-HTML基础+CSS基础

    .pg-header { height: 48px; text-align: center; line-height: 48px; background-color: rgba(127, 255, 2 ...

  3. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  4. Web前端开发基础 第一天（Html和CSS）

    学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...

  5. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  6. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  7. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  8. 前端基础——css

    前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.

  9. 前端读者 | 前端面试基础手册（HTML+CSS）

    本文来自@羯瑞:希望前端面试基础手册能帮助要找工作的前端小伙伴~~ HTML 前端需要注意哪些SEO? 合理的title.description.keywords:搜索对着三项的权重逐个减小,titl ...

随机推荐

  1. [PHP] PHP源码常用代码中的宏定义

    PHP源码常用代码宏定义:#define 宏名 字符串#表示这是一条预处理命令,所有的预处理命令都以#开头.define是预处理命令.宏名是标识符的一种,命名规则和标识符相同.字符串可以是常数.表达式 ...

  2. 常见的VPS虚拟化架构：OpenVZ、Xen、Hyper-V、KVM、VMWare OpenVZ

    OpenVZ OpenVZ特点是,它是直接调用母服务器的内核,所以会导致部分软件无法使用,以及部分内核文件是无法修改. OpenVZ适用人群:新手.低预算客户 OpenVZ注意事项:资源不是自己独有的 ...

  3. JS高级代码

    JS 的defineProperties 设置多个属性 var book = {}; //用Object.defineProperties()方法设置多个属性 Object.definePropert ...

  4. Node+mongodb线上部署到阿里云

    Node+mongodb线上部署到阿里云 部署使用的主要工具是pm2+nginx,使用码云的私有仓库,自动部署到服务器,私有仓库和服务器要事先设置好免密码登录.使用DNSPOD进行域名解析.事先准备好 ...

  5. 列表（List） 的增删改查及其他方法 和元组（tuple）的查

    一.列表 1.列表简介: 列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如:li ...

  6. mysql一些函数的记录

    今天瞎搞还是弄不出报名程序,偶尔记住了几个mysql函数 mysql_connect()连接数据库 mysql_error()输出文本报错 mysql_select_db()函数设置活动的MySQL  ...

  7. [bzoj3953] [WF2013]Self-Assembly

    将正方形视为连接字符间的边.比方说正方形上存在A+,B-,就从A-往B+连边,表示字符可以通过这个正方形进行变换. 如果能构成环的话就可以无穷大了...判环随便写个拓扑什么的... #include& ...

  8. http://acm.hdu.edu.cn/showproblem.php?pid=1039(水~)

    判读条件 1:有元音字母 2:不能三个连续元音或辅音 3.不能连续两个相同的字母,除非ee或oo #include<cstdio> #include<cstring> #inc ...

  9. [国嵌笔记][023][ARM寻址方式]

    寻找方式 1.处理器根据指令中给出的信息来找到指令所需操作数的方式 2.立即数寻址 操作数本身在指令中给出,立即数前加”#”表示立即数寻址,操作数在指令中 3.寄存器寻址 利用寄存器中的数值作为操作数 ...

  10. Cxf -wsdl2java 使用参数介绍

    wsdl2java -h 可以得到详细的参考文档: G:\cxf\apache-cxf-3.1.6\bin>wsdl2java -h wsdl2java -fe|-frontend <fr ...