其他分享
首页 > 其他分享> > html+css

html+css

作者：互联网

第一章

<html>
<!--解释器-->
<!DOCTYPE html>
<head>
	<!--字符集-->
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<!--刷新跳转-->
	<meta http-equiv="Refresh" Content="3600;Url=http://baidu.com"/>
	<!---->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<!---->
	<link rel="shortcut icon" href="mi.ico" type="image/x-icon"/>
	
	<title>第一章</title>

</head>


<body>
	<!--段落-->
	<p></p>
	<!--换行-->
	<br/>
	<!--分割线-->
	<hr/>
	<!--大于号小于号-->
	&lt  &gt
	<!--a 标签-->
	<a href="http://baidu.com" target="_blank">baidu</a>
	<!--a 标签锚点功能-->
	<h1 id='name'>第一章</h1>
	<a href="#name">第一章</a>
	<select>
	<!--<select size=2>展示多少个元素-->
	<optgroup label='中国'>
		<option>上海</option>
		<option>北京</option>
	</optgroup>
	<optgroup label='JP'>
	<option>东京</option>
	</optgroup>
	</select>
	<br/>
	<hr/>
	<!--input-->
	<input type='checkbox' checked='checked'>checkbox</input><br/>  <!--checked='checked' 默认-->
	<input type='radio'name='相同的name'>radio1</input><br/>  <!--name='相同的name' 实现多选项的互斥功能--->
	<input type='radio'name='相同的name'>radio2</input><br/>
	<input type='password' checked='checked'  placeholder="123456">password</input><br/>
	
	<input type='button' value='确认'>button</input><br>
	
	<input type='file'>file</input>
	<!--表单-->
	<form action='https://www.sogou.com/web' method='GET'>
		<input type='text' name='query' />
		<br/>
		<input type='submit' value='提交' />
		
	</form>
	
	<!--textarea-->
	<textarea></textarea>
	
	
	<!--label  名称与输入框相关联-->  
	<label for='我的名字'>账号:<input id='我的名字' type='text'></label>
	
	
	<!--ul ol dl -->
	<ul> <li></li></ul>	  <!--不排序-->
	<ol><li></li></ol>  <!--排序-->
	<dl><li></li></dl>   <!--自定义-->
	
	
	<!--表格-->
	<table border='1'>
		<tr> 
			<td>第一列</td>
			<td>第二列</td>
		<tr>
		<tr>
			<td>第一列</td>
			<td>第二列</td>
		<tr>
		
	</table>
	
	<!--fieldset-->
	<fieldset>
	<legend>登录</legend>
	用户：<br/>
	密码：
	
	</fieldset>
	
	<hr/>
	<!--上下-->
	<div style="background-color:red;height:45px;width:900px"></div>
	<div style="width:900px;margin:0px auto">  <!--左右-->
		<div style="background-color:green;height:500px;width:200px;float:left">qqq</div>
		<div style="background-color:blue;height:500px;width:700px;float:left">qqqq</div>
	</div>
	
	
	
	
	
	
</body>



</html>

标签

<div></div>    块级标签
<span></span>  内敛标签

居中 和取消div 的边距

stype="margin:0px auto;"

CSS

三种css的引用方式

  1. 在html标签中通过 style =""

<head> 
 <style>
   .ss{
   }
</style>
</head>

<link rel="stylesheet" type="text/css" href="/css/old.css">

选择器类型

  1. 标签选择器

    div{
background-color:red;
width:100px;
}   

多个标签使用同一个样式
p，div{

}

  2. calss 选择器

    .d1{

}

<div class='d1'></div>

  3. id 选择器

    #id01{

}

<div id="id01"></div>

  4. 关联选择器 div下的h1 标签

    div h1{

}

  5. 类型选择器

    input[type='txt']{
width:100px;
hight:100px;

}

css属性

  1. background-color

    background-color:red;

  2. background-image

    background-image:url("https://img.alicdn.com/bao/uploaded/i3/2107975731/O1CN01B42Ix71sCqSO6MS64_!!2107975731.jpg_600x600.jpg");
background-repeat:no-repeat;
background-position:-130px -100px;
opacity: unset;   //透明度

    1. 是否重复平铺

      background-repead:no-repead;    不重复
background-repead:repead-x; 	x轴重复
background-repead:repead-y;   y轴重复

    2. 移动图片显示位置

    background-position:100px 100px;      x坐标 y坐标 原点在右上角

  3. border 边框样式

  4. margin 外边距

    margin-top:10px;
margin-bottom:10px;

  5. padding 内边距

    padding-top:10px;
padding-bottom:10px;

  6. display

    display:none;
display:block;     内敛标签转换为块级标签
display:inline     块级别标签转换内敛标签

  7. cursor 伪造一个指针状态

    cursor: pointer;
cursor: wait;
cursour:help;

  8. position

    https://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

    position:static;
position:relative;
position:absolute; 
position:fixed;   //相对固定

标签：repead,标签,100px,html,background,position,选择器,css
来源： https://www.cnblogs.com/wangend/p/16661514.html