记录第一次写静态网页-百度首页

最新推荐文章于 2022-05-07 19:13:52 发布

WDNMde_

最新推荐文章于 2022-05-07 19:13:52 发布

阅读量262

点赞数 1

分类专栏：小白文章标签： html css

本文链接：https://blog.csdn.net/WDNMde_/article/details/116767085

版权

小白专栏收录该内容

15 篇文章 0 订阅

订阅专栏

作者分享了自己初次尝试使用HTML和CSS制作网页的经历，指出布局是难点，通过实践提升技能。虽然遇到困难，但认为实战是最佳学习路径。同时，对比了自己与他人进度的差距，表示会继续学习JavaScript，并准备MATLAB期末考试。

摘要由CSDN通过智能技术生成

马马虎虎学了一个周的html+css,开始了自己人生中的第一个网页编写，记录一下

感受

跟着绿叶学习网上计划完成了html和css的学习，然后就是完成第一个”大作业“
整个编写过程中个人觉得最难的是元素的布局，也就是把元素放到自己想要的位置去，然而这也是html要完成的核心任务，在知乎上提了个问，大多数回答还是要多练，但也有人说不要一开始就做项目，要夯实基础。我个人觉得其实做一个静态网页是对小白提升最快的途径。遇到问题时，要么百度，但是不知道是不是html太简单的原因，感觉百度大多是关于css样式的问题，很多在布局上的问题都解决不了，只能对着百度首页检查元素，自己一个一个慢慢试，哎~花了两个晚上总体加起来大约7小时，就完成了一个百度首页，原本完成第一个网页的激动感直接没有了。。然而打开csdn首页第一个视频就是一位大佬花一天时间完成了京东官网的编写。。。。这次第，怎一愁字了得。
今天看了一些js的内容，因为专业有学过c++课程，所以现在基础部分能懂，不过之后的很多东西就得重头开始学习了。
这个周的学习感觉很潦草，周末还有MATLAB期末考试，复习复习复习！
前路漫长~加油！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道</title>
    <style type="text/css">
       div{
           display: block;
       }
       .wraaper_new{
        position: relative;
        height: 100%;
        width: 100%;
        min-height: 768px;
        cursor: default;
       }
       .head{
            position:absolute;
            width:100%;
            min-width: 1000px;
       }
       .head1{
            margin-top: 25px;
       }
        .head2_l{ 
            color: black;
            float:left;
            line-height:22px;
            font-size: 15.5px;
            text-align:center;
            padding:0 27px;
            margin-left:-6px;
       }
       .head2_r{
            line-height:22px;
            color: black;
            float:right;
            text-align:center;
            margin-right: 30px;  
            font-size: 15.5x; 
            padding-left:20px;
       }
       a{
        text-decoration:none;
       } 
       .search{
            position:relative;
            width:100%;
            min-width: 1000px;
            margin:0 auto;
            text-align: center;
            
       }
      .ico{
            position: absolute;
            text-align: center;
            width: 100%;
            padding-top: 22px ;
      }
      img{
          width: 350px;
          height: 160px;
      }
      .textbox{
            position:relative;
            text-align: center;
            margin-top: 15px ;
            border-radius:20px 0 0 20px;
            width: 750px;
            height: 50px;
            border-color:rgb(25, 162, 216);
            text-align: left;
            font-size: 20px;
            outline: medium;/*解决点击文本框出现外框的问题*/
         }
    .search_btn{
            position: relative;
            left:1200px;
            top: -58.5px;
              float: left;
        }  
    .clear{clear:both;}
    </style>
</head>
<body>
    <div id="wrapper" class="wrapper_new">
    <div class=“head“>
        <div class="head1">
        <a href="http://news.baidu.com/" target="_blank";><div class="head2_l">新闻</div></a>
        <a href="https://www.hao123.com/"target="_blank";><div class="head2_l">hao123</div></a>
        <a href="http://map.baidu.com/"target="_blank";><div class="head2_l">地图</div></a>
        <a href="https://live.baidu.com/"target="_blank";><div class="head2_l">直播</div></a>
        <a href="https://haokan.baidu.com/?sfrom=baidu-top"target="_blank";><div class="head2_l">视频</div></a>
        <a href="http://tieba.baidu.com/"target="_blank"><div class="head2_l";>贴吧</div></a>
        <a href="http://xueshu.baidu.com/"target="_blank"><div class="head2_l";>学术</div> </a> 
        <a href="http://www.baidu.com/more/"target="_blank"><div class="head2_l";>更多</div></a>
        <a href="https://www.baidu.com/my/" target="_blank";><div class="head2_r">用户</div></a>
        <a href="https://www.baidu.com/s?tn=baidutop10&rsv_idx=2&wd=%E9%9D%92%E5%B2%9B%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5" target="_blank"; ><div class="head2_r">15°C</div></a>
        <div class="head2_r">设置</div></a>
       <a href="http://news.baidu.com/" target="_blank";><div class="head2_r">优</div></a>
       <a href="https://www.baidu.com/s?tn=baidutop10&rsv_idx=2&wd=%E9%9D%92%E5%B2%9B%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5" target="_blank";><div class="head2_r">青岛</div></a>
        <div class="clear"></div>    
    </div>
    </div>
    <div class="search">
        <div class="ico">
            <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_Pclogo_6ysd4c7a&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pc" target="_blank">
                <img src="https://www.baidu.com/img/bd_logo1.png?where=super"  width=270 height=130 alt="" title="百度一下，你就知道">
            </a>  
        <div class="serach_wrapper">
            <div calss="textbox">
                <input type="text" class="textbox" maxlength="100" autocomplete="off">
            </div>
            <div class="search_btn" >
                <input type="button" value="百度一下" style="
                cursor:pointer;
                height:56px;
                width:110px;
                color:#fff;
                background:#4e6ef2;
                border-radius:0 20px 20px 0;
                outline:none;
                font-size:17px;
                border:none;
                position: relative;
                left: -6px;
                top: 2px;
                cursor:pointer;" >
            </div>
        </div>
    </div>
    </div>
</body>
</html>

WDNMde_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录第一次写静态网页-百度首页

马马虎虎学了一个周的html+css,开始了自己人生中的第一个网页编写，记录一下感受跟着绿叶学习网上计划完成了html和css的学习，然后就是完成第一个”大作业“整个编写过程中个人觉得最难的是元素的布局，也就是把元素放到自己想要的位置去，然而这也是html要完成的核心任务，在知乎上提了个问，大多数回答还是要多练，但也有人说不要一开始就做项目，要夯实基础。我个人觉得其实做一个静态网页是对小白提升最快的途径。遇到问题时，要么百度，但是不知道是不是html太简单的原因，感觉百度大多是关于css样式的问题，很
复制链接

扫一扫

专栏目录