仿作百度页面
仿作百度页面，先用HTML将百度页面的基本框架搭建好，然后在css中展开布局。
首先用盒子展开布局，将页面主要分为三个部分，上部为导航栏，中间为主题部分，包括搜索栏和热点，下部为尾部导航栏。再为每个盒子设置自己的内外边距和内容的居中，再将每个盒子中的字体大小，字体颜色为其分别设置。
百度一下，你就知道
设置登录
致敬劳动者 1 长沙楼房倒塌23人被困39人失联 沸 2 北京67例感染者详情:含学生外卖员 热 * {padding: 0;margin: 0;color: black;
}a {text-decoration: none;
}.header a {text-decoration: none;margin-left: 30px;
}a:hover {color: skyblue;text-decoration: underline;
}li {list-style: none;
}.header {height: 60px;line-height: 60px;text-align: center;
}.header .lefr {float: left;
}.header .right {position: absolute;right: 0px;top: 0px;margin-right: 24px;float: right;
}.header .li {float: left;font: 12px/24px Arial, sans-serif;color: #222;position: relative;margin-right: 5px;margin-top: 20px;
}#more_li {color: #222;position: relative;margin-right: 35px;display: inline-block;font-size: 12px;
}.header .right .r_btn1 {display: inline-block;vertical-align: top;cursor: pointer;
}.header .right .r_btn2 {display: inline-block;margin-top: 18px;background-color: #4e71f2;font-size: 12px;height: 24px;width: 48px;margin-left: 30px;color: #fff;line-height: 24px;border-radius: 6px;text-align: center;
}.main {clear: both;
}.search_wrap {text-align: center;width: 660px;margin: 0 auto;
}.box {width: 830px;margin: 0 auto;height: 40px;
}.heizi .rebang {font-family: '黑体';
}.search_1 {float: left;width: 682px;height: 40px;border: 2px solid #c4c7ce;border-radius: 10px 0 0 10px;background-color: #fff;color: #222;
}.search_r {float: left;width: 130px;height: 44px;line-height: 40px;background-color: #4d6ef3;border-radius: 0 10px 10px 0;font-size: 14px;color: #fff;text-align: center;
}.search_r:hover {background-color: 4662d9;
}.hezi1 {width: 810px;margin: 50px 0 0 355px;height: 40px;
}.rebang,
.retu {float: left;
}.huan {color: gray;
}.huantu,
.huan {float: right;
}.hezi23 li {margin-bottom: 20px;
}.hezi23 {width: 1000px;margin: 0 auto;height: 250px;
}.hezi2 {float: left;width: 405px;height: 80px;margin-left: 88px;
}.hezi3 {float: left;width: 405px;height: 80px;margin-left: 10px;
}.hezi4 {margin-bottom: 0;height: 60px;line-height: 60px;text-align: center;
}.hezi4 li {display: inline-block;font: 12px/24px Arial, sans-serif;color: gray;margin-right: 10px;margin-top: 20px;padding-bottom: 10px;
}.hezi4 li a {color: gray;
}.fei {display: inline-block;width: 20px;height: 16px;background-color: #fd3e0a;color: #ffe8d1;line-height: 16px;border-radius: 4px;text-align: center;font-size: 13px;
}.hot {display: inline-block;width: 20px;height: 16px;background-color: #ff6200;color: #ffe8d1;line-height: 16px;border-radius: 4px;text-align: center;font-size: 13px;
}.new {display: inline-block;width: 20px;height: 16px;background-color: #dd696c;color: #ffe8d1;line-height: 16px;border-radius: 4px;text-align: center;font-size: 13px;
}
页面效果：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！