电影网站如何做采集,通栏式网站,沈阳做网站有名公司,遵义外国网站制作1. 该篇适用于从零基础学习前端的小白 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码#xff0c;以身体感悟带动头脑去理解新知识 一、实战#xff1a;将百度网站首页补全
上一篇零基础学前端#xff08;三#xff09;重点讲解 HTML-CSDN博客我们已经将顶部两侧内容已经… 1. 该篇适用于从零基础学习前端的小白 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码以身体感悟带动头脑去理解新知识 一、实战将百度网站首页补全
上一篇零基础学前端三重点讲解 HTML-CSDN博客我们已经将顶部两侧内容已经写完。
1. 接下来我们的目标如下图分析对应的标签已经写在下面图片我将百度logo涂上马赛克主要是担心图片违规怕被封掉 !-- 中间主体内容 --div classmaindiv classlogoBoximg classlogo src./img/logo.png /div classinputBoxinput /button百度一下/button/div/div/div
style/* 主体内容 */.logoBox{}.logoBox .logo{width: 206px;height: 66px;}.inputBox{}/* 标签选择器选中inputBox类下面的input */.inputBox input{width: 443px;height: 42px;border: 1px solid #ccc;}.inputBox button{ background-color: #4E6EF2; /* 设置背景颜色 */color: #fff; /* 设置文字颜色 */height: 44px;border: none;padding-left: 12px;padding-right: 12px;}
/style
做出来的效果图 2. 确定需要改进的问题 1. 那个缝隙不该存在百度一下按钮需要靠在 input输入框 2. 百度图片的logo 应该在输入框和按钮的中间 style/* 设置整体居中 */.logoBox{display: flex;flex-direction: column;align-items: center;}/*让按钮贴近input输入框*/.inputBox button{ margin-left: -10px; /*设置一个负值就方向贴近*/}/style3. 继续优化细节 我们可以看到 1. 按钮 和 输入框 贴近后虽然高度是一样的效果上还是有一点偏差 2. 输入框 和 按钮是有圆角的 style
/*让输入框 和 按钮 对其*/.inputBox{display: flex;align-items: center;}
/style
style.inputBox input{ border-radius: 5px 0 0 5px; /*设置圆角4个值分别代表 左上角、右上角、右下角、左下角*/}.inputBox button{ border-radius: 0 5px 5px 0; }
/style 效果图 二、目标写百度热搜
这就是接下来我们要写得内容 div classhotSearchdiv classtopdiv classleftBoxspan classtitle百度热搜/spanspan classarrow/span/divdiv classrightBoximg classrefresh src./img/refresh.png/span classhuan换一换/span/div/divol classinfoli杭州亚运会中国队开门红/lili打造“数字丝绸之路”/lili美国2009年就开始入侵华为服务器/lili亚运会今日赛程/lili12306回应节假日车票涨价/lili警方钓鱼演练321名大学生上钩/li/ol/div /* 热搜部分 */.hotSearch{display: flex;flex-direction: column;align-items: center;margin-top: 30px;}.hotSearch .top{display: flex;justify-content: space-between;align-items: center;width: 512px;}.hotSearch .top .leftBox{ display: flex;align-items: center;cursor: pointer;}.hotSearch .top .leftBox .title{font-weight: 700;font-size: 14px;margin-right: 2px;}.hotSearch .top .leftBox .arrow{color: #626675;}.hotSearch .top .rightBox{display: flex;align-items: center;cursor: pointer;}.hotSearch .top .rightBox .refresh{width: 16px;height: 16px;}.hotSearch .top .rightBox .huan{font-size: 14px;color: #626675;margin-left: 2px;}.hotSearch .info{font-size: 14px;width: 512px;display: flex;flex-wrap: wrap;justify-content: space-between;}.hotSearch .info li{width: 245px;margin: 8px 0;} 三、将代码上传到csdn可以下载我的源码
https://download.csdn.net/download/tengyuxin/88359310 四、结束语 我个人认为初学时学的内容逻辑简单、思路清晰最重要所以我只是挑取核心部分初学者理解后可直接上手项目这就是我的思想逻辑。 css知识有很多我不建议初学者去事无巨细的学每个知识点我的看法是带着问题以实践的方式先将我博客逻辑跑通让你对前端有个整体观念从基础到最后发布网站别人可以访问到时你自己补充剩余。 为了加深理解html和css我又写了一篇HTMLCSS实战主要是模仿QQ首页的纯页面样式编写来看看吧。
