WEB前端开发人员交流社区

搜索
查看: 1375|回复: 5

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

[复制链接]

1

主题

6

帖子

3

积分

前端入门

Rank: 1

积分
3

社区QQ达人

发表于 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>


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

1

主题

6

帖子

3

积分

前端入门

Rank: 1

积分
3

社区QQ达人

 楼主| 发表于 2016-3-25 10:17:48 | 显示全部楼层
就是想把下面百度一下那个框变长,但是好像body里限制了长度,把长度加长后,提交那个submit的按钮就去了下一行,然而我并没有办法挪上去
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复 支持 反对

使用道具 举报

2

主题

28

帖子

13

积分

前端入门

Rank: 1

积分
13
发表于 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>

评分

参与人数 1金钱 +5 收起 理由
falost + 5 乐于助人,赞一个!

查看全部评分

WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复 支持 反对

使用道具 举报

1

主题

8

帖子

4

积分

前端入门

Rank: 1

积分
4

社区QQ达人

发表于 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>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

点评

页面仿很6,如果不看地址栏,我竟然信以为真了  发表于 2016-3-25 21:22
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复 支持 反对

使用道具 举报

1

主题

6

帖子

3

积分

前端入门

Rank: 1

积分
3

社区QQ达人

 楼主| 发表于 2016-3-25 21:31:00 | 显示全部楼层
黑熊怪 发表于 2016-3-25 19:59
好巧,我也做了个百度,发上来一起讨论一下吧。[mw_shl_code=html,true]

好6好6
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2020-7-13 20:08

快速回复 返回顶部 返回列表