HTML,CSS基础知识,水平渐变

HTML常见标签

头标签

<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="1"/>每一秒自动刷新
<meta http-equiv="refresh" content="1;url=http://www.baidu.com"/>每一秒自动跳转到url地址
</head>

普通标签

   				<p>:段落标签
                <h1>
                <h6>以次减小,成段展示,加粗
                <strong>加粗</strong>
                <em>斜体
                <del>中划线
                容器,可以绑定操作
                <div>
                <span>
                空格,回车:文本分隔符
                &nbsp;空格
                &lt;<
                &gt;>
                <br>回车
                <hr> 水平线

图片,超链接

 		<img src="" alt="" title="">
 			作用:插入图片
			src:url,相对路径,绝对路径
			alt:当网速不好时,图片加载不出来便会显示其属性值
			title:当鼠标放在图片上时,会显示其属性值
 			
        <a href=""  target="_blank"></a>
        	target:_blank是在新空白页打开
        <a href="tel:电话号码"></a>
        	拨打电话
        <a href="mailto:邮件地址"></a>
        	发邮件
        <a href="#id"></a>
        	当作锚点,连接到id区域

form表单

  • 类型,属性名,属性值
  • 对于多选和单选以及下拉菜单,设置默认值为checked=“checked”
      <form action="" method="get/post">
            <p>
              <!--输入框的值就是值,value-->
            username:<input type="text" name="" value="输入框中的默认值"          
            </p>           
            <p>
            password: <input type="password" name="">
            </p>
            <p>
                <input type="submit" value="login">
            </p>
            <p>
            	<!--单选,同一个单选题目的name属性值相同-->
                <input type="radio" name="uname" value="">
            </p>
		            <p>
		             a <input type="radio" name="uname" 
		             value="a" checked="checked"><!--默认选中-->
		            </p>
		            <p>
		               b <input type="radio" name="uname"value="b">
		            </p>
		            <p>
		                c<input type="radio" name="uname" value="c">
		            </p>
		    <p>
            	<!--多选,同一个多选题目的name属性值相同-->
                <input type="checkbox" name="uname" value="">
            </p>
		             <p>
		                a <input type="checkbox" name="uname" value="a">
		             </p>
		             <p>
		                b <input type="checkbox" name="uname"value="b">
		             </p>
		             <p>
		                 c<input type="checkbox" name="uname" value="c">
		             </p>
       </form>

下拉菜单

 <form>
            <select name="qqq">
                <option value="111">111</option>
                <option value="222">222</option>
            </select>
            <input type="submit">
 </form>

小案例

onfocus 事件:当 input 输入框获取焦点时执行一段 Javascript代码:
onblur 事件:当用户离开input输入框时执行一段Javascript代码:

实例
当 input 输入框获取焦点时执行一段 Javascript代码:

<html>
    <head>
        <meta charset ="utf-8">
        <title>msn</title>
        <script>
            function jujiao(x)
            {
                if(x.value=='请输入关键字')
                {
                    x.value='';
                    x.style.color='#424242';
                }
               
            }
            function likai(x)
            {
                if(x.value=='')
                {
                    x.value='请输入关键字';
                    x.style.color='#999999';

                }
            }
            

        </script>
      
    </head>
    <body>
        <form action="" method="">
	         <input type="text" 
	         value="请输入关键字" 
	         style="color: #999999" 
	         onfocus="jujiao(this)" 
	         onblur="likai(this)">
        </form>
       
    </body>

</html>

主流浏览器及其内核

主流浏览器内核
IEtrident
FirefoxGecko
Google ChromeWebkit/blink
SafariWebkit
Operapresto

css

  • 三种引入方式
  • 同步与异步
  • 选择器4种
  • 选择器优先级
  • 引入方式的优先级
  • 权重
  • css属性

1、选择器优先级

		<div id="a"></div>
        <div class="b"></div>   <div class="c d"></div>//两个class
       
        <!-- 属性选择器 -->
        <!-- [属性] --> 或者<!-- [属性="属性值"] -->
        <!-- 属性和class优先级相同 -->
       
         <!-- 标签选择器 -->
         <!-- 通配符选择器 * -->
         !important

2、css权重,并且权重之间是256进制

!imporant      		infinity
行间样式			    1000
id					100
class|属性|伪类  	10
标签选择器|伪元素	1
通配符选择器		    0

3、border

4、text文本

  • text-align
  • line-height 实现水平垂直居中
  • text-decoration:四个值
  • text-indent:首行缩进
    text-indent: 2em;单位:em 是相对单位, 1em=1 font-size;
  • cursor
    cursor: pointer;

5、伪类选择器

  • 在标签后加上伪类选择器,比如’:hover’选择器
    a:hover{
    backgroung-color:#f40;
    }

6、inline 压缩
7、先定义功能
符合模块化开发,提高效率,复用性,适合团队合作
8、开发前对一些标签初始化,可以修改一些标签的功能。初始化时,可以使用通配符,因为通配符的权重为0(不明白)。
9、行级元素和航机块元素有文字特性,文字分隔符,解决图片间隔问题

<img src="../qq截图/n.jpg"><img src="../qq截图/n.jpg">  

10、position
在这里插入图片描述

    <!-- <em>1</em> -->
    <!-- 为什么通配符好 -->
    <!-- 盒子模型 四个属性,三个属性,盒模型计算问题
        盒子的宽高不包括margin-->
    <!-- body有一个margin=8px -->
    <!-- opacicy -->

    <!-- 层模型,absolute,relative,想对于原来位置平移 ;fixed;居中-->
    <!-- margin是在原有位置上移动。position是按照规则移动 -->

小案例

五环,实现居中,并且随着窗口改变

<html>
    <head>
        <meta charset="utf-8">
        <title>msn</title>
        <style>
            *{
                margin: 0px;
            }
            .circle1,
            .circle2,
            .circle3,
            .circle4,
            .circle5{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 10px solid black;
            }
            .circle1{
                border-color: crimson;
                position: absolute;
                left: 0px;
                top:0px;
            }
            .circle2{
                border-color: darkgoldenrod;
                position: absolute;
                left:130px;
                top:0px;

            }
            .circle3{
                border-color: yellow;
                position: absolute;
                left:260px;
                top:0px;
            }
            .circle4{
                border-color: aquamarine;
                position:absolute;
                top: 70px;
                left: 65px;
            }
            .circle5{
                border-color: purple;
                position:absolute;
                top: 70px;
                left: 195px;
            }
            .contain{
                /* border: 2px solid black; */
                width: 380px;
                height: 190px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -190px;
                margin-top: -95px;
            }
        </style>
    </head>
    <body>
               
            <div class="contain">
                <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                        <div class="circle5"></div>
            </div>    
    </body>

</html>

效果图在这里插入图片描述

11、margin

  • 相对于父容器进行调整
  • Margin塌陷:通过除法pfc解决
  • float,position,inline-block,overflowa;hidden会触发bfc

12、float

  • 清除浮动可以使块级元素作为父级元素时被浮动的子元素撑开,利用伪元素。
  • 设置position或者float之后,会变成行级块元素
  • 自动变成行级块元素
  • 可以写出文字环绕图片的效果
  • 清除浮动:
伪元素时行级元素
  ul::after{
            float: left;
            content: '';
            display: block;
            clear: both;

        }

13、单行文本溢出

   .container{
                width: 500px;
                height: 30px;
                border: 1px solid #f40;
                line-height: 30px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

多行文本…
14、背景图片 background-image: url();

  • 图片代替文字应该如何代替?
<html>
    <head>
        <meta charset="utf-8">
        <title>图片代替文字</title>
        <style>
            a{
                display: inline-block;
                width: 270px;
                height: 0px;
               
                padding-top:129px;
               
                line-height: 30px;
                background-image: url(https://www.baidu.com/img/bd_logo1.png?where=super);
                overflow: hidden;
                background-size: 270px 129px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -185;
                margin-top:-64.5px;
             
            }
         
        </style>
    </head>
    <body>
             

       <div class="container">
        <a href="https://www.baidu.com">百度</a>
       
       </div>

      
       
       
    </body>

</html>

15、块级元素可以套任何元素,行级元素只能套行级元素。但是p标签不能套块级元素
16、文本类元素和文字底对齐。如果文本类元素中有文本,则文本和里面的文本底对齐。
调节对齐线:

17、水平渐变

linear-gradient(方向,color1,color2,.....);
只写颜色:默认从上到下
方向有:to top,to bottom,to left,to right
可以添加透明度,color使用rgba(r,g,b,0~1)
0代表透明,1代表不透明

18、径向渐变

background-image: radial-gradient(shape size at position, 
start-color, ..., last-color);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值