《求指教》小白仿图的各种问题

火火的烧火棍 · 发表于 2016-3-25 10:15:34

自学了一周把自己定到入门了，大概自我定位不准如我。今天是第一次仿图，最简单的旧版百度首页，一个多小时出来这种样子我也是醉了。弄不好啊弄不好，求助，欢迎批评。图片效果附上了，但想做成的样子没做到。问题就是1main里的字间距不会调，除非我用 2text框和submit框我想给放在一行，但是body里限制了宽度，没办法把text的框变长一点。3字体怎么看怎么怪。
我是小白，万望诸君勿笑

[HTML] 纯文本查看 复制代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>百度首页</title>
<style type="text/css">
.{
padding:0;
margin:0;
}
#body
{
width:400px;
margin:0 auto;
}
#body_image
{
padding-top:35px;
}
#main
{
float: left;  
width:500px;
margin:0 0 20px -50px;
height:25px;
font-size:18px;
font-weight:20;
}
form
{
display:inline-block;
margin:0 0 0 -50px;
}
#text
{
float:left;
width: 300px;
height: 45px;
border-color:#39F;
border-style:solid;
border-width:1px;
font-size:24px;
}
#button
{
height:55px;width:120px;background-color:#39F;border-style:solid;font-size:24px;color:#FFF;margin-left:-10px;
}
div footer
{
width:500px;
margin-bottom:0;
margin-top:150px;
margin-left:-10px;
}
</style>
</head>
<body>
<div id="body">
<div id="body_image"><img src="image/bd_1.png" alt="百度" width="350" height="200"></div>
<div id="main">
<a href="#">新闻</a> <a href="#">网页</a> <a href="#">贴吧</a> <a href="#">知道</a> <a href="#">音乐</a> <a href="a">图片</a> <a href="#">视频</a> <a href="#">地图</a> <a href="#">百科</a> <a href="#">文库</a> <a href="#">更多</a></div>
<div>
<form>
<input id="text" name="input" text="text" value="百度一下 你就知道" maxlength="100">
<input id="button" name="百度" type="submit" title="百度一下" value="百度一下">
</form>
<footer>
<span>@copy by huohuo2016 <a href="#">使用前必读</a></span> 京ICP证030173号
</footer>
</div>
</body>
</html>

火火的烧火棍 · 发表于 2016-3-25 10:17:48

就是想把下面百度一下那个框变长，但是好像body里限制了长度，把长度加长后，提交那个submit的按钮就去了下一行，然而我并没有办法挪上去

街角小林 · 发表于 2016-3-25 13:06:08

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>百度首页</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#body
{
width:600px;
margin:0 auto;
}
#body_image
{
padding-top:35px;
text-align:center;
}
#main
{
float: left;
width:100%;
height:25px;
font-size:18px;
font-weight:20;
text-align:center;
}
form
{
border:1px solid #999;
display:block;
width:550px;
background-color:#099;
margin-left:25px;
height:45px;
margin-top:30px
}
#text
{
float:left;
width:440px;
height:45px;
border:none;
font-size:24px;
outline:none;
}
#button
{
height:45px;
width:110px;
background-color:#39F;
font-size:24px;
color:#FFF;
float:right;
border:none
}
div footer
{
margin-bottom:0;
margin-top:150px;
text-align:center
}
</style>
</head>
<body>
<div id="body">
<div id="body_image">
<img src="image/bd_1.png" alt="百度" width="350" height="200">
</div>
<div id="main">
<a href="#">新闻</a> <a href="#">网页</a> <a href="#">贴吧</a> <a href="#">知道</a> <a href="#">音乐</a> <a href="a">图片</a> <a href="#">视频</a> <a href="#">地图</a> <a href="#">百科</a> <a href="#">文库</a> <a href="#">更多</a>
</div>
<form>
<input id="text" name="input" text="text" value="百度一下你就知道" maxlength="100">
<input id="button" name="百度" type="submit" title="百度一下" value="百度一下">
</form>
<footer>
<span>@copy&nbspby&nbsphuohuo2016&nbsp<a href="#">使用前必读</a></span>&nbsp京ICP证030173号
</footer>
</div>
</body>
</html>

黑熊怪 · 发表于 2016-3-25 19:59:13

好巧，我也做了个百度，发上来一起讨论一下吧。

[HTML] 纯文本查看 复制代码

<!doctype html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>baidu</title>
  <script src="style/jquery.min.js"></script>
  <script src="style/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style/bootstrap.min.css"/>
  <link rel="stylesheet" href="style/style.css"/>
</head>
<body>
  <div class="wrapper">
    <div class="login">
      <div class="weather-mod" id="weather_moer">
        <a href="#">
          <span class="city-name">郑州：</span>
          <span class="show-icon"><img src="image/weather-icon.jpg" alt=""/></span>
          <span class="show-item">18度</span>
          <span class="show-polution-name">良</span>
          <span class="show-polution-num">79</span>
        </a>
        <!--天气下拉菜单-->
        <div class="weather-moer" id="weather-menu">
          <div class="weather-more-title">
            <span class="weather-more-date">03月25日</span>农历二月十七 <span class="seven-day"><a href="#">未来七天天气</a></span><span class="weather-setting"><a href="#">设置</a></span>
          </div>
          <div class="weather-more-list">
            <div class="everyday-weather font-b">
              <a href="#">
                <p class="everyday-title">今天（周五）</p>
                <p class="everyday-icon"><img src="image/weather-eve-icon1.jpg" alt=""/></p>
                <p class="everyday-temp">12度</p>
                <p class="everyday-condition">多云转晴</p>
                <p class="everyday-wind">微风</p></a>
            </div>
            <div class="everyday-weather">
              <a href="#">
                <p class="everyday-title">今天（周五）</p>
                <p class="everyday-icon"><img src="image/weather-eve-icon1.jpg" alt=""/></p>
                <p class="everyday-temp">12度</p>
                <p class="everyday-condition">多云转晴</p>
                <p class="everyday-wind">微风</p></a>
            </div>
            <div class="everyday-weather">
              <a href="#">
                <p class="everyday-title">今天（周五）</p>
                <p class="everyday-icon"><img src="image/weather-eve-icon1.jpg" alt=""/></p>
                <p class="everyday-temp">12度</p>
                <p class="everyday-condition">多云转晴</p>
                <p class="everyday-wind">微风</p></a>
            </div>
            <div class="everyday-weather">
              <a href="#">
                <p class="everyday-title">今天（周五）</p>
                <p class="everyday-icon"><img src="image/weather-eve-icon1.jpg" alt=""/></p>
                <p class="everyday-temp">12度</p>
                <p class="everyday-condition">多云转晴</p>
                <p class="everyday-wind">微风</p></a>
            </div>
            <div class="everyday-weather">
              <a href="#">
                <p class="everyday-title">今天（周五）</p>
                <p class="everyday-icon"><img src="image/weather-eve-icon1.jpg" alt=""/></p>
                <p class="everyday-temp">12度</p>
                <p class="everyday-condition">多云转晴</p>
                <p class="everyday-wind">微风</p></a>
            </div>

          </div>
        </div>
      </div>
      <div class="icon-list">
        <ul>
          <li><a href="#">宝箱</a></li>
          <li><a href="#">换肤</a></li>
          <li><a href="#">消息</a></li>
          <li><a href="#">显示频道</a></li>
        </ul>
      </div>
      <div class="moregoods" id="moreGoods">
        <a href="#">更多产品</a>
        <!--moregoods下拉菜单-->
        <div class="more-list" id="moreGoods_list">
          <div class="more-list-title">更多产品</div>
          <div class="more-goods-list">
            <div class="more-goods-icon"><img src="image/music-icon.jpg" alt=""/></div>
            <p>音乐</p>
          </div>
          <div class="more-goods-list">
            <div class="more-goods-icon"><img src="image/pic-icon.jpg" alt=""/></div>
            <p>音乐</p>
          </div>
          <div class="more-goods-list">
            <div class="more-goods-icon"><img src="image/wenku-icon.jpg" alt=""/></div>
            <p>音乐</p>
          </div>
          <div class="more-goods-list">
            <div class="more-goods-icon"><img src="image/wenwen-icon.jpg" alt=""/></div>
            <p>音乐</p>
          </div>
        </div>
      </div>
      <div class="user">
        <div class="user-name">
          <a href="#">豆芽芽芽儿</a>
          <!--<div class="user-name-menu"></div>   下拉菜单-->
        </div>
        <div class="user-setting">
          <a href="#">设置</a>
          <!--<div class="user-setting-menu"></div>   下拉菜单-->
        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="#">糯米</a></li>
          <li><a href="#">新闻</a></li>
          <li><a href="#">hao123</a></li>
          <li><a href="#">地图</a></li>
          <li><a href="#">视频</a></li>
          <li><a href="#">贴吧</a></li>
        </ul>
      </div>
    </div>
    <div class="content">
      <div class="logo">
        <img src="image/logo.png" alt=""/>
      </div>
      <div class="search">
        <form action="">
          <input type="text" class="search-text"/>
          <input type="submit" class="search-btn" value="百度一下"/>
        </form>
      </div>
    </div>
    <div class="foot">
      <p>
        <span><a href="#">设为首页</a></span>©2016 Baidu<a href="#">使用百度前必读</a><a href="#">意见反馈</a>京ICP证030173号
      </p>
      <p>京公网安备11000002000001号</p>
    </div>
  </div>
  <script>
    $(function(){
      $('#weather_moer').hover(function(){
        $('#weather-menu').show();
      },function(){
        $('#weather-menu').hide();
      });
      $('#moreGoods').hover(function(){
        $('#moreGoods_list').show();
      },function(){
        $('#moreGoods_list').hide();
      })
    })
  </script>
</body>
</html>

[CSS] 纯文本查看 复制代码

body {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: arial, 'Microsoft YaHei', '微软雅黑', sans-serif;
  color: #555;
}
a {
  font-family: arial, sans-serif;
  color: #555;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.hide {
  display: none;
}
.font-b {
  font-weight: bold;
}
.wrapper {
  position: relative;
  min-width: 1000px;
  height: 100%;
}
.login {
  width: 100%;
  height: 32px;
  line-height: 32px;
  border-bottom: 1px solid #e3e3e3;
}
.login a {
  text-decoration: underline;
}
.login ul li {
  float: left;
}
.login .weather-mod {
  float: left;
  margin-left: 15px;
}
.login .weather-mod span {
  margin-left: 5px;
}
.login .weather-mod a {
  text-decoration: none;
}
.login .weather-mod .show-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: -5px;
}
.login .weather-mod .show-icon img {
  width: 100%;
}
.login .weather-mod .show-polution-name {
  font-weight: bold;
  color: #badc00;
}
.login .weather-mod .show-polution-num {
  padding-right: 8px;
  border-right: 1px solid #3c3c3c;
}
.login .icon-list {
  margin-left: 10px;
  float: left;
}
.login .icon-list a {
  padding-right: 18px;
}
.login .menu {
  float: right;
}
.login .menu a {
  padding-right: 20px;
  font-size: 14px;
  font-weight: bold;
}
.login .user {
  float: right;
}
.login .user .user-name,
.login .user .user-setting {
  float: left;
}
.login .user .user-name a,
.login .user .user-setting a {
  margin-right: 15px;
}
.login .moregoods {
  float: right;
}
.login .moregoods a {
  display: block;
  width: 85px;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  background-color: #398bfb;
}
.weather-mod {
  position: relative;
}
.weather-mod .weather-moer {
  position: absolute;
  top: 31px;
  left: -16px;
  z-index: 9;
  display: none;
  width: 652px;
  background-color: #FFF;
  border: 1px solid #e3e3e3;
}
.weather-mod .weather-moer .weather-more-title {
  margin: 0 20px;
  height: 40px;
  line-height: 39px;
  color: #999;
  border-bottom: 1px solid #e3e3e3;
}
.weather-mod .weather-moer .weather-more-title .weather-more-date {
  color: #666;
  margin-right: 5px;
}
.weather-mod .weather-moer .weather-more-title .seven-day {
  margin-left: 15px;
}
.weather-mod .weather-moer .weather-more-title .seven-day a {
  color: #398bfb;
}
.weather-mod .weather-moer .weather-more-title .seven-day a:hover {
  text-decoration: underline;
}
.weather-mod .weather-moer .weather-more-title .weather-setting {
  float: right;
  background: url("../image/settion-icon.jpg") no-repeat left 8px;
}
.weather-mod .weather-moer .weather-more-title .weather-setting a {
  padding-left: 22px;
}
.weather-mod .weather-moer .weather-more-list {
  margin: 10px 0;
  overflow: hidden;
}
.weather-mod .weather-moer .weather-more-list a:hover {
  color: #398bfb;
}
.weather-mod .weather-moer .weather-more-list .everyday-weather {
  float: left;
  margin: 0 20px;
  width: 90px;
  text-align: center;
}
.weather-mod .weather-moer .weather-more-list .everyday-weather p {
  margin-bottom: 0;
  line-height: 22px;
}
.weather-mod .weather-moer .weather-more-list .everyday-weather .everyday-title {
  line-height: 34px;
}
.weather-mod .weather-moer .weather-more-list .everyday-weather .everyday-icon {
  margin-bottom: 5px;
  width: 100%;
}
.more-list {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 0 15px;
  display: none;
  width: 86px;
  min-height: 730px;
  background-color: #f9f9f9;
  border-left: 1px solid #e7e7e7;
}
.more-list .more-list-title {
  line-height: 34px;
  text-align: center;
  border-bottom: 1px solid #e7e7e7;
}
.more-list .more-goods-list {
  padding-top: 10px;
  text-align: center;
  border-bottom: 1px solid #e7e7e7;
}
.more-list .more-goods-list p {
  margin-bottom: 0;
}
.content {
  margin: 67px auto 360px;
  width: 650px;
}
.content .logo {
  margin: 0 auto;
  width: 280px;
}
.content .logo img {
  width: 100%;
}
.content .search {
  margin-top: 20px;
  width: 100%;
  font-size: 16px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.content .search input {
  border: none;
}
.content .search .search-text {
  padding: 8px 0;
  width: 543px;
  text-indent: 5px;
}
.content .search .search-btn {
  float: right;
  padding: 8px 10px;
  width: 105px;
  color: #FFF;
  background-color: #398bfb;
}
.foot {
  width: 100%;
  text-align: center;
  color: #999;
}
.foot a {
  margin-left: 2px;
  margin-right: 2px;
  text-decoration: underline;
  color: #999;
}
.foot span {
  margin-right: 10px;
}
.foot p {
  margin-bottom: 5px;
}

[JavaScript] 纯文本查看 复制代码

<script>
    $(function(){
      $('#weather_moer').hover(function(){
        $('#weather-menu').show();
      },function(){
        $('#weather-menu').hide();
      });
      $('#moreGoods').hover(function(){
        $('#moreGoods_list').show();
      },function(){
        $('#moreGoods_list').hide();
      })
    })
  </script>

火火的烧火棍 · 发表于 2016-3-25 21:31:00

黑熊怪发表于 2016-3-25 19:59
好巧，我也做了个百度，发上来一起讨论一下吧。[mw_shl_code=html,true]

好6好6

[HTML] 《求指教》小白仿图的各种问题

本帖子中包含更多资源

评分

本帖子中包含更多资源

点评

社区QQ达人