码迷,mamicode.com
首页 > Web开发 > 详细

导航,头部,CSS基础

时间:2017-10-17 19:03:58      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:content   页面   http   size   简介   inpu   之间   登录   平台   

1.制作自己的导航条。

2.HTML头部元素:

<base>  定义了页面链接标签的默认链接地址

<style>  定义了HTML文档的样式文件

<link>  定义了一个文档和外部资源之间的关系

3.练习样式表:行内样式表;内嵌样式表;外部样式表

分别练习定义三类选择器:

HTML 选择器

CLASS 类选择器

ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录|哈哈书院</title>
<base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank">
<link rel="stylesheet" type="text/css" href="ha.css">

</head>
<body style="background-color: khaki">
<nav>
<img src="w_02_08_00.png">
<a href="">首页</a>
<a href="">下载</a>
<input type="text"name="search">
<button type="submit">搜索</button>
<a href="">登录</a>
<a href="">注册</a>
</nav>
<script>
document.write(Date())
document.getElementById("2015").innerHTML="????";
</script>
<div id="contar" style="width:400px;margin:0px auto;" >
<div id="header" style="background-color:aquamarine"><h2 align="center" style="margin-bottom: 0;"><font face="华文新魏" color="#ffc0cb" size="12" >哈哈书院 </font></h2></div>
<div id="content" style="background-color:peachpuff;width:400px;float:left;line-height:40px;">
<form action="">
Username:<input type="text" name="user" placeholder="敢问阁下大名"><br>
Password:<input type="password" name="password" placeholder="请输入通关密码">
<br>

<input type="radio" name="role" value="stu">student
<input type="radio" name="role" value="tea">teacher

<input type="checkbox" name="vehicle" value="Bike">记住密码<br><br>

<input type="button" value="login">
<input type="button" value="cancel">
</form>
</div>
<div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duym</div>
</div>
<div id="container" style="width:400px;margin:0px auto;" >
<div id="header" style="background-color:aquamarine"><h2 align="center" style="margin-bottom: 0;"><font face="华文新魏" color="#ffc0cb" size="12" >问答平台</font></h2></div>
<div id="content" style="background-color:peachpuff;width:400px;float:left;line-height:40px;">
<from>
<select>
<option>--请选择--</option>
<option>问答</option>
<option>收藏</option>
</select>
</from>
<ul>
<li>哈哈书院简史</li>
<ol><li>建院之初</li><li>建院那些事</li><li>桃李满天下</li></ol>
</ul>
<ul>
<li>哈哈书院招生简介</li>
<ol><li>爱笑的人运气不会差</li><li>喜欢你的颜,想要你的钱</li><li>哈哈哈哈哈</li><br></ol>
</ul>
<div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duym</div>

</div>
<style type="text/css">
p{
color:darkcyan;font-size: 10px;
}
.textblue{
color:blue;
text-decoration: underline;
}
.tea{
background-color:yellow;
}
c{
color:yellow;
}
</style>
<div>
<p>上哈哈书院<span style="font-family: ‘Consolas‘, ‘Deja Vu Sans Mono‘, ‘Bitstream Vera Sans Mono‘, monospace; font-size: 35px;background-color: #FFD700"; >拿开学大礼包</span></p>
</div>
<hr>

<a href="http://www.gzcc.cn/">哈哈学院<br>

</body>
</html>

 CSS:

p{
            color: crimson;
        }
        h1{
     background-color: cyan;
        }
        .textyellow{
            color: gold;
            background-color: cyan;
        }
        #tt{
            color: chartreuse;
        }

技术分享

 

导航,头部,CSS基础

标签:content   页面   http   size   简介   inpu   之间   登录   平台   

原文地址:http://www.cnblogs.com/00js/p/7680897.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!