day15 CSS JS DOM初探
居中 line-hight 是上下
text-line 是左右
實現一個返回頂部的功能：
1 先寫好CSS
2 寫動做JSjavascript
寫一個懸浮菜單：css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
margin: 0 auto;
height: 48px;
width:980px;
background-color: aquamarine;
color: coral;
position: fixed;
top: 0;
left: 20px;
right: 20px;
line-height: 48px;
text-align: center;
}
.pg-body{
margin: 0 auto;
background-color: #dddddd;
width:980px;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">此處爲菜單</div>
<div class="pg-body">此處爲內容</div>
</body>
</html>
效果：html
上下滾動菜單始終固定在頂部java
實現一個點贊按鈕的效果：web
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
<div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: aquamarine"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
<div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;background-color: aquamarine"></div>
</div>
</body>
</html>
效果：ide
實現一個遮罩層，就是平時的彈出選擇框，即模態框：函數
加透明度：
opacity 設置遮罩層的透明度 0-1 的範圍
三層
設置一個值，誰的大誰在上面：
z-index
實踐：工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: white;
/*display: none;*/
z-index: 10;
position: fixed;
height: 400px;
width: 500px;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
border: 1px brown;
">
<div style="display: inline">姓名</div><input type="text"/>
<div style="display: inline">密碼</div><input type="text"/>
</div>
<div style="background-color: blue;
/*display: none;*/
position: fixed;
z-index: 9;
top:0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;"></div>
<div style="height: 5000px;background-color: coral;"> hehhehhehe</div>
</body>
</html>
效果：字體
圖片的問題：
overflow
能夠設置隱藏或者自動生成滾動條
設置上右下左的間隔：url
僞類：
鼠標移到後應用：
當鼠標移到當前標籤上時，就會使得下面的css生效
hover
實踐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed; /* 設置爲固定位置*/
right: 0; /*距離右邊0*/
left: 0; /*距離左邊0*/
top: 0; /*距離上邊0*/
height: 48px; /*高度爲48像素*/
background-color: #2459a2; /*背景顏色*/
line-height: 48px; /*設置上下居中，和高度同樣才能居中*/
}
.pg-body{
margin-top: 50px; /*設置距離頂部50像素，避免menu擋住body*/
}
.w{
width: 980px; /*全局寬度 980像素*/
margin: 0 auto; /*自動居中*/
}
.pg-header .menu{
display: inline-block; /*設置標籤爲行內塊級混合標籤，能夠設置高度和寬度*/
padding: 0 10px 0 10px; /*設置標籤上下左右的距離*/
color: white; /*字體顏色*/
}
.pg-header .menu:hover{ /*此屬性是當鼠標移動到此時應用*/
background-color: dodgerblue; /*背景顏色*/
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
<a class="menu">42區</a>
</div>
</div>
<div class="pg-body">
<div class="w">ddddd</div>
</div>
</body>
</html>
漸變色 就是一個很是細的圖片一直自動堆疊
高度增長 也是自動堆疊
控制圖片怎麼堆疊，使用下面的
其實圖標都是隻用一個圖，而後經過調整
就能顯示一個圖片不一樣的位置
實踐：
<body>
<div style="height: 100px;"></div>
<div style="height: 20px;width:20px;background-image: url(icon_18_118.png);border: 1px solid red"></div>
</body>
顯示不一樣位置：
<body>
<div style="height: 100px;"></div>
<div style="height: 20px;
width:20px;
background-image: url(icon_18_118.png);
background-position-x: 0px;
background-position-y: -58px;
border: 1px solid red"></div>
</body>
相對的位置，如點讚的圖案：
有個問題，圖片會擋住輸入，修改後就行了
實踐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="user-input" style="padding: 5px;">
<div style="display: inline-block;width: 100px;text-align: right;">帳號：</div>
<div style="display: inline-block;width: 300px;height:30px;position: relative;">
<input type="text" style="height: 30px;
width: 270px;
padding-right: 30px"></input>
<span style="position:absolute;
right: 6px;
top:10px;
background-image: url(user.jpg);
height: 16px;
width: 16px;
display: inline-block"></span>
</div>
</div>
<div class="passwd-input" style="padding: 5px;">
<div style="display: inline-block;width: 100px;text-align: right;">這是密碼：</div>
<div style="display: inline-block;width: 300px;height:30px;position: relative;">
<input type="text" style="height: 30px;
width: 270px;
padding-right: 30px"></input>
<span style="position:absolute;
right: 6px;
top:10px;
background-image: url(i_pwd.jpg);
height: 16px;
width: 16px;
display: inline-block"></span>
</div>
</div>
</body>
</html>
開始 javascript
一門獨立的語言
和java沒半毛錢關係
helloworld
寫代碼的位置，兩種形式：
1在html 文件中：
2 單獨文件，引入到html文件中：
先執行js 從上往下讀運行
js沒有完成以前 網頁就一直等待js完成，這樣對用戶就不友好
解決辦法就是把js放在html尾部
寫在body 內部的最下面：
寫的時候先寫 var
斟酌之後確實是全局，再去掉var
定義函數：
在控制檯打印日誌：
console.log(1)
根據id找到內容：
獲取內容：
獲取子列表：
拼接字符串：
作一個滾動條效果：
實踐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function func() {
var tag = document.getElementById('i1');
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length)
var new_content = l + f;
tag.innerText = new_content;
}
setInterval('func()',500);
</script>
</head>
<body>
<div id="i1">歡迎老男孩蒞臨指導 </div>
</body>
</html>
效果：
join 添加分隔符
循環：
DOM
作了一個動做就是把文檔轉換爲一個對象
改變數據：
document.getElementById('i1').innerText = 'new數據'
實現模態框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
right: 50%;
top: 50%;
margin-left: -250px;
margin-top: -100px;
z-index: 10;
}
</style>
</head>
<body>
<div>
<input type="button" value="添加" onclick="ShowModel();"/>
</div>
<!--遮罩層 -->
<div id="i1" class="c1 hide"></div>
<!-- 彈出窗-->
<div id="i2" class="c2 hide">
<p>
<input type="text"/>
<input type="text"/>
</p>
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="肯定" onclick="HideModel();"/>
</p>
</div>
<script>
function ShowModel() {
document.getElementById('i1').classList.remove('hide')
document.getElementById('i2').classList.remove('hide')
}
function HideModel() {
document.getElementById('i1').classList.add('hide')
document.getElementById('i2').classList.add('hide')
}
</script>
</body>
</html>
效果：
實現一個全選和取消的功能：
分號必需要加，由於線上的時候會把js文件成爲一行，必須用分好來斷句， 生成一行就是爲了節約空間，有專門的壓縮工具
實現一個後臺管理的簡單頁面，須要點擊菜單顯示菜單，能夠全選，反選，能夠點擊有模態框效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>管理</title>
<style>
.pg-header{
margin: 0 auto;
height: 48px;
/*width:980px;*/
background-color: #2459a2;
color: coral;
position: fixed;
top: 0;
left: 0;
right: 0;
line-height: 48px;
z-index: 10;
}
.pg-header .logo{
display: inline-block;
margin-left: 50px;
}
.pg-body{
margin-top: 50px;
width:1080px;
height: 2000px;
}
.pg-body .menu{
text-align: center;
width:200px;
border: 1px solid red;
padding: 10px;
background-color: aquamarine;
float: left;
margin: 5px;
}
.pg-body .menu .every-menu{
text-align: center;
display: inline-block;
border: 1px solid red;
width: 180px;
height: 50px;
margin: 5px;
padding: 2px;
line-height: 50px;
}
.pg-body .info{
float: left;
margin: 5px;
border: 1px solid red;
width: 800px;
height: 500px;
}
.pg-body .info .info-menu{
margin: 10px;
}
.pg-body .info-body{
margin: 5px;
/*width: 650px;*/
height: 400px;
border: 1px solid red;
text-align: center;
}
.go-header{
position: fixed;
bottom:20px;
right:20px;
width: 80px;
height: 80px;
background-color: coral;
color: white;
z-index: 11;
cursor: pointer;
}
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
right: 50%;
top: 50%;
margin-left: -250px;
margin-top: -100px;
z-index: 10;
}
.hide-menu{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div class="pg-header">
<a class="logo">LOGO</a>
</div>
<div class="go-header" onclick="GoTop();">
<img src="back_top.png" alt="美女" title="返回頂部">
</div>
<!--遮罩層 -->
<div id="i1" class="c1 hide"></div>
<!-- 彈出窗-->
<div id="i2" class="c2 hide">
<p>
<div style="margin: 5px;">
<div style="display: inline-block;width: 60px;text-align: right">IP:</div>
<input type="text"/>
</div>
<div style="margin: 5px;">
<div style="display: inline-block;width: 60px;text-align: right">主機:</div>
<input type="text"/>
</div>
</p>
<p>
<div style="display: inline-block;width: 200px;text-align: center">
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="肯定" onclick="HideModel();"/>
</div>
</p>
</div>
<div class="pg-body">
<div class="menu">
<div class="item">
<div id='m1' class="header" onclick="ChangeMenu('m1');">菜單1</div>
<div class="content hide-menu">
<div>內容1</div>
<div>內容1</div>
<div>內容1</div>
</div>
</div>
<div class="item">
<div id='m2' class="header" onclick="ChangeMenu('m2');">菜單2</div>
<div class="content hide-menu">
<div>內容2</div>
<div>內容2</div>
<div>內容2</div>
</div>
</div>
<div class="item">
<div id='m3' class="header" onclick="ChangeMenu('m3');">菜單3</div>
<div class="content hide-menu">
<div>內容3</div>
<div>內容3</div>
<div>內容3</div>
</div>
</div>
<div class="item">
<div id='m4' class="header" onclick="ChangeMenu('m4');">菜單4</div>
<div class="content hide-menu">
<div>內容4</div>
<div>內容4</div>
<div>內容4</div>
</div>
</div>
</div>
<div class="info">
<div class="info-menu">
<input type="button" value="全選" onclick="CheckAll();"> </input>
<input type="button" value="取消" onclick="CancleAll();"> </input>
<input type="button" value="反選" onclick="ReCheckAll();"> </input>
<input type="button" value="添加" onclick="ShowModel();"> </input>
</div>
<div class="info-body">
<div>
<table>
<thead>
<tr>
<td>選擇</td>
<td>主機</td>
<td>IP</td>
<td>備註</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"/></td>
<td>web101</td>
<td>192.168.8.5</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>web102</td>
<td>192.168.8.6</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>web103</td>
<td>192.168.8.7</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>web104</td>
<td>192.168.8.8</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>web105</td>
<td>192.168.8.9</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<script>
function CheckAll() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for (var i = 0; i < tr_list.length; i++) {
var curren_tr = tr_list[i];
var checkbox = curren_tr.children[0].children[0];
checkbox.checked = true;
}
}
function CancleAll() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for (var i = 0; i < tr_list.length; i++) {
var curren_tr = tr_list[i];
var checkbox = curren_tr.children[0].children[0];
checkbox.checked = false;
}
}
function ReCheckAll() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for (var i = 0; i < tr_list.length; i++) {
var curren_tr = tr_list[i];
var checkbox = curren_tr.children[0].children[0];
if (checkbox.checked) {
checkbox.checked = false;
}else{
checkbox.checked = true;
}
}
}
function GoTop() {
document.body.scrollTop = 0;
}
function ShowModel() {
document.getElementById('i1').classList.remove('hide')
document.getElementById('i2').classList.remove('hide')
}
function HideModel() {
document.getElementById('i1').classList.add('hide')
document.getElementById('i2').classList.add('hide')
}
function ChangeMenu(nid){
var current_header = document.getElementById(nid);
var item_list = current_header.parentElement.parentElement.children;
for(var i=0;i<item_list.length;i++){
var current_item = item_list[i];
current_item.children[1].classList.add('hide-menu');
}
current_header.nextElementSibling.classList.remove('hide-menu');
}
</script>
</body>
</html>
效果：
相關文章
- 1. DOM初探（33）——異步加載JS
- 2. 初探虛擬 DOM
- 3. HTML,CSS,JS,DOM
- 4. JS --DOM CSS
- 5. 初探CSS Modules
- 6. 初識js——DOM（1）
- 7. CSS+DIV-初探CSS
- 8. Python Day15(CSS)
- 9. material-ui中初探css in js
- 10. CSS初探
- 更多相關文章...
- • W3C CSS 活動 - W3C 教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 適用於PHP初學者的學習線路和建議
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. DOM初探（33）——異步加載JS
- 2. 初探虛擬 DOM
- 3. HTML,CSS,JS,DOM
- 4. JS --DOM CSS
- 5. 初探CSS Modules
- 6. 初識js——DOM（1）
- 7. CSS+DIV-初探CSS
- 8. Python Day15(CSS)
- 9. material-ui中初探css in js
- 10. CSS初探