导航，头部，CSS基础

发布时间：2023-09-06 01:18责任编辑：蔡小小关键词：CSS

制作自己的导航条。
HTML头部元素：
1. <base> 定义了页面链接标签的默认链接地址
2. <style> 定义了HTML文档的样式文件
3. <link> 定义了一个文档和外部资源之间的关系
练习样式表：
1. 行内样式表
2. 内嵌样式表
3. 外部样式表
分别练习定义三类选择器：
1. HTML 选择器
2. CLASS 类选择器
3. ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
 ???<meta charset="UTF-8">
 ???<title>京东商城</title>
 ?????<base href="https://www.jd.com/?cu=true&utm_source=daohang.qq.com&utm_medium=tuiguang&utm_campaign=t_1000003625_qqmz&utm_term=89fb882cc9e940c6aa35790013ad4efd">

 ???<link rel="stylesheet"type="text/css"href="171.css">
 ???<style type="text/css">
 ????????p{
 ???????????color: #e21037;
 ???????}

 ?????.textyellow{
 ???????????color: #802104;
 ??????????????????}
 ???????#t{
 ???????????color: #ffdb1d;
 ???????}
 ???</style>
</head>
<body>
<nav>
 ???<img src="http://img00.hc360.com/home-a/201306/201306281422233199.jpg">
 ???<a href="">首页</a>
 ???<a href="">下载</a>
 ????<input type="text"name="search"placeholder="关键词索引">

 ???<input type="submit"value="搜索">
<a href="">登录</a>
<a href="">注册</a>
</nav>
<div>
 ??????<p>京东商城<span style="background-color:yellow ;font-family: ‘华文隶书‘, Helvetica, Arial, sans-serif;font-size: 50px;color:white">猜你喜欢</span></p>
</div>



<div ?id="denglu" style="width:400px">
 ???<div id="headerone" style="background-color:lightblue;"><h2>登录</h2></div>

 ???<div id="contentone" style="background-color:white;height:150px;width:400px;float:left;float:left;"align="center"">
 ???????<form>
 ???????????用户名:<input type="text"name="用户名"placeholder="请输入用户名"><br>
 ??????????密码:<input type="password"name="密码"placeholder="请输入密码"><br>
 ???????????<input type="radio"name="role"value="stu">买家
 ???????????<input type="radio"name="role"value="tch">卖家<br>
 ???????????<input type="button"value="会员登录">
 ???????????<input type="button"value="免费注册">
 ???????????<input type="button"value="忘记密码">
 ???????</form></div>
 ???<div id="footerone" style="background-color:lightblue;clear:both;text-align:center;">版权 ?duym</div>
</div>

<div ?id="wedang" >
 ???<div id="headertwo"><h2>类别</h2></div>

 ???<div id="contenttwo">
 ???????<form>
 ???????<select>
 ???????????<option>加入购物车</option>
 ???????????<option>加入收藏夹</option>

 ???????</select>
 ???????</form>
 ???????<ul>
 ???????????<li>家用电器</li>
 ???????????<li>数码用品</li>
 ???????????<li>玩具乐器</li>
 ???????????<li>医用保健</li>
 ???????????<li>礼品鲜花</li>
 ???????????<li>美妆个护</li>
 ???????</ul>
 ????
</div>
 ???<div id="footertwo">版权 ?duym</div>
 ???</div>





</body>
</html>

导航，头部，CSS基础

原文地址：http://www.cnblogs.com/YWEIEN/p/7680839.html

导航，头部，CSS基础

知识推荐