标签：color 元素 学习 课程 nbsp 第十四 font border d1
今天实现效果
乱七八糟的代码，重新建的文件夹，然后写了改，改了写，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下,你就知道</title>
<style type="text/css">
.submit{
background-color:#3385ff;
height:38px;
font-size:20px;
color:white;
border:0
}
.input{
border: 1px solid #b6b6b6;
width:474px;
height:36px;
font-size:20px;
}
</style>
<link rel="stylesheet" href="main.css" type="text/css"/>
</head>
<body>
<header>
<div id="d1" style="text-align:left">
<div class="menu">
<a href="http://news.baidu.com/">新闻</a>
<a href="https://www.hao123.com/">hao123</a>
<a href="https://map.baidu.com/@13035085.64,4303516.59,12z">地图</a>
<a href="https://live.baidu.com/">直播</a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>
<a href="https://tieba.baidu.com/index.html">贴吧</a>
<a href="https://xueshu.baidu.com/">学术</a>
<a href="https://www.baidu.com/more/">更多</a>
</div>
</div>
<div style="text-align:right ">
<a href="https://www.baidu.com/more/">登录</a>
<select>
<option>设置</option>
<option>搜索设置</option>
<option>高级搜索</option>
<option>关闭预测</option>
<option>隐私设置</option>
<option>关闭热榜</option>
</select>
</ul>
</div>
<!--搜索区域-->
<div class="middle">
<form action="http://www.baidu.com/baidu" target="_blank">
<div style="text-align:center" >
<div>
<a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs">
<img src="../第三次作业\logo.png">
</a>
</div>
<br>
<input type="text" class="input" name="word">
<input type="submit" value="百度一下" class="submit" href="https://www.baidu.com/" >
</form>
</div>
<!--页面导航nav元素-->
</header>
<!--中部百度热搜-->
<div>
<table align="center">
<tr></tr><div><h4><a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry">百度热搜<a><h4></div></tr>
<tr>
<td>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%B9%BF%E5%B7%9E%E5%8D%97%E6%B2%99%E6%96%B0%E5%A2%9E6%E4%BE%8B%E6%84%9F%E6%9F%93%E8%80%85%E4%B8%BA%E4%B8%80%E5%AE%B6%E4%BA%BA&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">1.广州南沙新增6例感染者为一家人</a>
</td>
<td>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%A7%91%E5%85%B4%3A%E6%8E%A5%E7%A7%8D%E7%AC%AC3%E9%92%88%E7%96%AB%E8%8B%97%E6%8A%97%E4%BD%93%E6%8F%90%E5%8D%8710%E5%80%8D&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">2.科兴:接种第3针疫苗抗体提升10倍<a>
</td>
</tr>
<tr>
<td>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%A6%BB%E5%BC%80%E5%B9%BF%E5%B7%9E%E5%87%BA%E7%9C%81%E9%9C%80%E6%8C%8148%E5%B0%8F%E6%97%B6%E5%86%85%E9%98%B4%E6%80%A7%E8%AF%81%E6%98%8E&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">3.离开广州出省需持48小时内阴性证明</a>
</td>
<td>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%BE%8E%E8%AE%AE%E5%91%98%E6%90%AD%E4%B9%98%E5%86%9B%E7%94%A8%E8%BF%90%E8%BE%93%E6%9C%BA%E7%AA%9C%E8%AE%BF%E5%8F%B0%E6%B9%BE&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">4.美议员搭乘军用运输机窜访台湾<a>
</td>
</tr>
<table>
</div>
<div align="center" style="bottom:0;margin-top:300px;">
<div>
<a id="setf" href="//www.baidu.com/cache/sethelp/help.html" target="blank">把百度设为主页</a>
<a href="http://home.baidu.com">关于百度</a>
<a href="http://ir.baidu.com">About Baidu</a>
<a href="http://e.baidu.com/?refer=888">百度推广</a>
@2021 Baidu <a href="http://www.baidu.com/duty/">使用百度前必读</a> <a href="http://jianyi.baidu.com/">意见反馈</a> 京ICP证030173号
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
</div>
</div>
</body>
</html>
写了不少无效的东西，但是有效的东西还是起来了作用
#d1{
position: absolute;
left: 10px;
}
#d1 ul{
list-style: none;
}
#d1 a{
font-family: "微软雅黑";
color: black;
font-size: 13px;
}
#d1 li{
float: left;
margin-left: 18px;
text-align: center;
}
#d1 input[type="button"]{
background-color: #0000ff;
color: white;
}
#d1 input[type="button"]:hover{
cursor: pointer;
}
#d2{
position:relative;
text-align: center;
top: 100px
}
#d3{
top: 280px;
position: relative;
}
#d4{
position: relative;
top:290px;
text-align: center;
color:#999999;
}
#d4 a{
font-family: "微软雅黑";
color:#999999;
font-size: 16px;
}
#d4 ul{
list-style: none;
}
#d4 li{
float: left;
margin-left: 15px;
}
#a1{
margin-bottom:100px;
}
#t:active{
border-color: #3388FF;
}
p a {
text-decoration: none;
}
div a {
text-decoration: none;
}
a {
color: gray;
}
a:hover {
color: #3388FF;
}
.container
{
width: 500px;
height: 50px;
margin: 100px auto;
}
.parent {
width: 100%;
height: 42px;
top: 4px;
position: relative;
}
.parent>input:first-of-type {
/*输入框高度设置为40px, border占据2px，总高度为42px*/
width: 380px;
height: 40px;
border: 1px solid #ccc;
font-size: 16px
outline: none;
}
.parent>input:first-of-type:focus {
border: 1px solid #317ef3;
padding-left: 10px;
}
.parent>input:last-of-type {
/*button按钮border并不占据外围大小，设置高度42px*/
width: 100px;
height: 44px;
position: absolute;
background: #317ef3;
border: 1px solid #317ef3;
color: #fff;
font-size: 16px;
outline: none;
}
今日份学习内容：
1、emmet插件：自动生成HTML代码片段，vscode敲一个！之后点击tab 2、块级元素独占一行，行级元素不换行，块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素（行级元素）除外,现在已经没有这种叫法了，现在的元素包含关系取决于元素的相关类别。 3、头部容器元素：\<header><header>
十四周学习总结：把尚硅谷上有关css的内容学了一遍，然后跟着腾讯课堂走了一段时间。晚上或者有空的时候敲了敲代码。完成这些效果的时候采用了以下两种方式：从外部引入到样式分为两种：（注意写在head标签里面） 当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个css文件，然后引用到页面中。
Link样式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>
Html式： <style type="text/css">@import url("css.css");></style>
标签：color,元素,学习,课程,nbsp,第十四,font,border,d1 来源： https://blog.csdn.net/qq_51082388/article/details/117632548
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。