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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架</title>
<style>
.class01{
	width:200px;
	height:600px;
	background-color:green;
	float:left;
	position:fixed;
	top:45px;
	bottom:100px;
	overflow:auto;
	
}

.class02{
	padding-top:45px;
	width:695px;
	height:1000px;
	background-color:orange;
	float:left;
	margin-left:205px;
	margin-top:45px;
}
.class03{
display:block;
cursor: wait;
}

.class02 li{
float:left;
list-style:none;
color:white;
padding-left:20px;
}

.class01 li{
list-style:none;
line-height: 3;
color:white;
font-family:fantasy;
cursor: pointer;
}
body {
margin:0px auto;
}
#oldboy{
font-size:30px;
line-height:45px;
margin-left:20px;
font-family:fantasy;
color:white;
}

#head{
background-color:red;
width:900px;
height:45px;
position:fixed;
padding:0px auto;
}

#body {
width:900px;
}
</style>
</head>
<body>
<div id="head">
<div id="oldboy">Old boy</div>
</div>
<div id="body">
	<div class='class01'>
		<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
		<li>Jquery</li>
				<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
		<li>Jquery</li>
				<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
		<li>Jquery</li>
						<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
		<li>Jquery</li>
		</ul>
	
	</div>
	<div class='class02'>
	<ul>
		<li>蔬菜</li>
		<li>水果</li>
	
	
	</ul>
	<br/>
	
<em class='class03'>aaa</em>
	</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;   //相对固定

引入jquery

<script type="text\javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

查看当前网站的版本

在浏览器consol中输入：
$.fn.jquery

基本语法

//$(selector).action()
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

常用格式一

$(function(){
    $('p').click(){
        $(this).hide()
    }
})

常用格式二

$(document).ready(function(){ 
   // 开始写 jQuery 代码... 
});

选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()

元素 元素
语法 描述 实例
$("p") 元素选择器
$("#test_id") id选择器
$(".test") class 选择器
$("*") 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$("p.intro") 选取 class 为 intro 的

元素

 在线实例
$("p:first") 选取第一个

元素

 在线实例
$("ul li:first") 选取第一个
    元素的第一个
  • 元素
 在线实例
$("ul li:first-child") 选取每个
    元素的第一个
  • 元素
 在线实例
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 元素 在线实例
$(":button") 选取所有 type="button" 的 元素 和 在线实例
$("tr:even") 选取偶数位置的
在线实例
$("tr:odd") 选取奇数位置的

jquery事件

什么是事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover

内置函数

$map()

$each()

siblings() 获取同一等级的子元素

方法

hide 和show 隐藏和显示

	$(function(){
			$("#div_id").click(function(){
				$("div").hide("10000");  //"slow" "fast" "毫秒数"
			});
			$("button").dblclick(function(){
				$("div").show("slow");
			});
	});

toggle()切换显示和隐藏

	$(function(){
			$("button").click(function(){
				$("div").toggle("10000");
			});
	});
posted @ 2022-09-06 13:50  mingtian是吧  阅读(16)  评论(0)  编辑  收藏  举报