本文记录了一天的学习成果，包括使用HTML和CSS构建了一个简易的百度搜索页面。学习内容涵盖emmet插件提高HTML编写效率，理解块级与行内元素的区别，以及外部样式表的引入方法。还探讨了CSS布局和颜色调整，并总结了本周的前端知识学习，如头部容器元素的使用，以及不同样式表引入方式。
今天实现效果
乱七八糟的代码，重新建的文件夹，然后写了改，改了写，
<!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>
扫一扫
1308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
