初识HTML+CSS及baidu首页模仿show

最新推荐文章于 2025-08-13 18:53:35 发布

原创最新推荐文章于 2025-08-13 18:53:35 发布 · 710 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #百度首页 #前端 #网页制作 #css

html+css+js 专栏收录该内容

1 篇文章

订阅专栏

本文是作者自学HTML和CSS的心得，通过对比化眼妆来形象地说明网页制作的复杂性。文章介绍了HTML的基本结构，包括`<html>`, `<head>`, `<body>`等标签，并展示了尝试仿制百度首页的简单CSS代码。同时，作者提及开始接触JS，对DOM感到困惑，决定通过实践和注释代码的方式来加强学习。" 90021056,53697,IFS DDK学习：文件系统驱动开发详解,"['驱动开发', 'windows', 'IFS DDK']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

哎哎哎哎自学好难好累哦来个大活人带带我啊。

20190701-20190702

认识它们两天了，我感觉做网页就像化眼妆，学问也不小哦。

html文件基本结构，编辑器会自动生成滴。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<q>短文本<blockquote>长文本
<span>设置单独样式，.为class类，#为id，*为全局。
<hr>水平横线。
<address>
<code><pre>
<ul>列表<ol>排行榜
<div id="***">命名
<table summary=“***”>表格   <style type="text/css">加框线   <caption>表标题</caption>

表单标签：
<form method="post" action="save.php">
      <label for="username">用户名:</label>
      <input type="text"  name="username" id="username" value="" />
      <label for="pass">密码:</label>
      <input type="password"  name="pass" id="pass" value="" />    
      <input type="submit" value="确定"  name="submit" />
      <input type="reset" value="重置" name="reset" />
</form>  
<textarea  rows="行数" cols="列数">文本框输入文本</textarea>~
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>~
<select multiple="multiple">  /*多选*/
    <option value="you">you</option>
    <option value="me">me</option>
</select>~

狗狗祟祟，耐心到此结束，日后有雅兴时再补充。。上我百度首页代码先：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下 你就知道</title>

    <link href="baiduStyle.css" rel="stylesheet" type="text/css"/>

</head>
<body>

<p style="text-align: right">
    <a class="bold" href="http://news.baidu.com/" title="百度新闻--海量中文资讯平台">新闻</a>
    <a class="bold" href="https://www.hao123.com/" title="hao123_上网从这里开始">hao123</a>
    <a class="bold" href="https://map.baidu.com/" title="百度地图">地图</a>
    <a class="bold "href="http://v.baidu.com/"title="百度视频--业界领先的中文视频搜索引擎之一">视频</a>
    <a class="bold" href="https://tieba.baidu.com/index.html"title="百度贴吧--全球最大的中文社区">贴吧</a>
    <a class="bold" href="http://xueshu.baidu.com/"title="百度学术-保持学习的态度">学术</a>
    <a href="https://wx.qq.com/"title="百度一下 你就知道">登录</a>
    <a href="">设置</a>
    <input class="more" type="submit" value="更多产品" name="submit"/>
</p>

<div class="logo">
    ![404](https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuYmFpZHUuY29tL2ltZy9iZF9sb2dvMS5wbmc)

</div>

<div style="text-align: center">
    <form method="post" action="save.php">
        <input type="text"  name="reserch" id="reserch" value="" style="width: 500px"/>
        <input class="more" type="submit"value="百度一下"neme="submit"></form>
</div>

<div class="QR">
    [外链图片转存失败(img-DiMM8rgv-1562148227234)(https://mp.youkuaiyun.com/mdeditor/my%20QR.jpg)]

</div>
<p style="text-align: center">扫一扫添加</p>
<p style="text-align: center;color:gray">性感丑开 在线陪聊</p>
<div class="small"
<p><a style="color: gray;" href="https://www.baidu.com/cache/sethelp/help.html"title="把百度设为主页--帮助页面中心"><span>把百度设为主页</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a style="color: gray;" href="http://home.baidu.com/"title="关于百度"><span>关于百度</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a style="color: gray;" href="http://home.baidu.com/"title="About Baidu"><span>About Baidu</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a style="color: gray;" href="http://e.baidu.com/?refer=888"title="百度推广|用科技让营销更简单"><span>百度推广</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>
</div>
</body>

css:

.bold{font-weight: bold;}

.more{background: #36f;
color: white;}

.logo{text-align: center;
margin-top: 100px;}

.QR{text-align: center;
margin-top: 330px;
}

.small{text-align: center;
    color: gray;
    font-size: 5px;
}

span{text-decoration: underline;}~

你们可以运行一下，但之间我上传了自己的本地文件，闹着玩的，输出结果如下：
在这里插入图片描述
over，以上是我在csdn的第一篇博客，请指教！请包容！

emmm本幽灵又回来了，小哥哥说了笔记自己看的，要坚持做总结。其实我今天开始入门js了，看了一天看到dom真的好懵呀，慕课的课程给了好大篇幅给定义，还不如实操一下。静下心来做了各种button，不好玩，动态，window.open/close。这些都是基础啦，定义而后循环选择这些语句想必有编程基础的大佬们一看就懂，瞬间后悔自己之前没有好好学习。js就是让你制作的网页活跃起来！

然后今天换另一种方式做笔记了，就是将我的编程加上注释！有趣的成果我会分享出来的，写文章是为了表现我能坚持多久！