简单小网页制作一

最新推荐文章于 2023-09-16 16:27:59 发布
最新推荐文章于 2023-09-16 16:27:59 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43797908/article/details/94122903
版权

效果： 

 

  

HTML： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引进css-->
    <link rel="stylesheet" href="index.css" />
</head>
<body>
<!------------------------------header---------------------------------->
<div class="header">
    <div>
        下蛋中的战斗鸡
    </div>
    <ul id="menu">
        <li>MENU</li>
    </ul>
    <input type="button" value="切换颜色" />
</div>
<!------------------------------侧边导航栏-------------------------------------->
<div id="side_nave">
    <span>关闭侧边栏</span>
</div>
<!------------------------------版本导航栏-------------------------------------->
<div id="edition" class="container">
    <ul>
        <li>Visual Studio 2019 Enterprise</li>
        <li>BF8Y8-GN2QH-T84XB-QVY3B-RC4DF</li>
        <li>Visual Studio 2019 Professional</li>
        <li>NYWVH-HT4XC-R2WYW-9Y3CM-X4V3Y</li>
    </ul>
</div>
<!------------------------------作者信息模块-------------------------------------->
<h3>··读完了喵喵··</h3>
<div id="writer" class="container">
    <table>
        <tr>
            <td>
                作&nbsp;&nbsp;者：
            </td>
            <td>
                <a href="#">百思不得姐</a>
            </td>
        </tr>
        <tr>
            <td>
                出&nbsp;&nbsp;处：
            </td>
            <td>
                <a href="#">https://www.zijixiedaima.com</a>
            </td>
            
        </tr>
        <tr>
            <td>
                关于博主：
            </td>
            <td>
                美女
            </td>
        </tr>
        <tr>
            <td>
                版权声明：
            </td>
            <td>
                署名-非商业性使用-禁止演绎，<a href="#">协议普通文本</a>|<a href="#">协议法律文本</a>
            </td>
        </tr>
        <tr>
            <td>
                声援博主：
            </td>
            <td>
                如果您觉得文章管用，可以点击文章右下角<span>【</span><a href="#" class="tuijian">推荐</a><span>】</span>。您的鼓励是博主最大的动力！
            </td>
        </tr>

    </table>
</div>
<!------------------------------分类模块------------------------------------------>
<div id="fenlei" class="container">
    <table>
        <tr>
            <td>
                分类：
            </td>
            <td>
                <a href="#">碎片代码</a>
            </td>
        </tr>
    </table>
</div>
<!------------------------------分享模块-------------------------------------->
<div id="share" class="container">
    <ul>
        <li class="one">好文要顶</li>
        <li class="two"><a href="#">关注我</a></li>
        <li class="three"><a href="#">收藏该文</a></li>
        <li class="four"><a href="#">分享到微博</a></li>
        <li class="five"><a href="#">分享到微信</a></li>
    </ul>
</div>
<!------------------------------文章点赞收藏-------------------------------------->
<div id="artical" class="container">
    <div>
        <span></span>
        <ul class="massage">
            <li><a href="#">百思不得姐</a></li>
            <li><a href="#">关注-2</a></li>
            <li><a href="#">粉丝-73</a></li>
            <li><a href="#">+关注</a></li>
        </ul>
    </div>
    <div class="recommend_top">0</div>
    <div class="recommend_bott">推荐</div>
    <div class="oppose_top">0</div>
    <div class="oppose_bott">反对</div>
    <table>
        <tr>
            <td><a href="#">&lt;&lt;</a>上一篇：</td>
            <td><a href="#">https://www.zijixiedaima.html</a></td>
        </tr>
        <tr>
            <td><a href="#">&gt;&gt;</a>下一篇:</td>
            <td><a href="#">https://www.zijixiedaima.html</a></td>
        </tr>
    </table>
    <ul class="shuaxin">
        <li class="pinglun"><a href="#">刷新页面</a></li>
        <li class="yemian"><a href="#">刷新评论</a></li>
        <li class="dingbu"><a href="#">返回顶部</a></li>
    </ul>
</div>
<!------------------------------历史文章跳转-------------------------------------->
<div class="container" id="history">
    <p>历史上的今天：</p>
    <table>
        <tr>
            <td>2017-04-04</td>
            <td><a href="#">Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) E</a></td>
        </tr>
        <tr>
            <td>2017-04-04</td>
            <td><a href="#">Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) D</a></td>
        </tr>
        <tr>
            <td>2017-04-04</td>
            <td><a href="#">Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) C</a></td>
        </tr>
        <tr>
            <td>2017-04-04</td>
            <td><a href="#">Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) B</a></td>
        </tr>
        <tr>
            <td>2017-04-04</td>
            <td><a href="#">Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) A</a></td>
        </tr>

    </table>
    <div class="img">

    </div>
</div>
<!------------------------------底部-------------------------------------->
<div id="bottom">
    <ul>
        <li>美少女 ©2019 百思不得姐</li>
        <li>【小哥哥>3<小姐姐】</li>
        <li>This blog will running : forever</li>
        <li>友情链接：<a href="#">申请坑位</a></li>
    </ul>
</div>
<script src="index.js"></script>
</body>
</html>

CSS： 

*{
    margin: 0;
    padding: 0;
}
/*版心*/
.container{
    width: 1000px;
    margin: 0 auto;

}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: cadetblue;
}
/*------------------------header-----------------------------*/
.header{
    height: 300px;
    background-image: url("images/2.gif") ;
    border-bottom: #cccccc dotted 1px;
    overflow: hidden;
    position: relative;
}
.header div{
    width: 600px;
    height: 100px;
    /*background-color: deeppink;*/
    margin: 100px auto 100px;
    color: black;
    text-align: center;
    font: normal 700 60px "宋体";
    line-height: 100px;
}
.header ul{
    position: absolute;
    left: 20px;
    top: 20px;
    width: 50px;
    height: 30px;
    /*background-color: cadetblue;*/
    border: aliceblue 1px solid;
    line-height: 30px;
}
.header ul li{
    width: 30px;
    height: 15px;
    float: left;
    cursor: pointer;
}
/*header改变背景颜色*/
.header input{
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #ccc;
    outline: 0;
}
/*----------------------------侧边导航栏----------------------------*/
#side_nave{
    width: 200px;
    height: 1000px;
    background-color: black;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
/*侧边栏关闭按钮*/
#side_nave span{
    border: white solid 1px;
    float: right;
    font: normal 700 16px "宋体";
    margin-top: 5px;
    margin-right: 5px;
    color: azure;
    cursor: pointer;
}
/*----------------------------版本导航栏----------------------------*/
#edition{
    height: 200px;
    /*background-color: aqua;*/

}
#edition ul li{
    font: normal 700 18px "宋体";
    height: 50px;
    width: 400px;
    text-align: left;/*文字左端对齐*/
    line-height: 50px;
    margin: auto;/*盒子水平居中*/
    cursor: text;
}
/*----------------------------作者信息模块----------------------------*/
h3{
    margin: 60px auto 20px;
    text-align: center;
    color: darksalmon;
}
#writer{
    height: 200px;
    width: 900px;
    /*background-color: gainsboro;*/
    /*margin-top: 100px;*/
    padding-left: 100px;
    border:#ccc solid 1px;
    background: rgba(0,0,1,0.1);
}
#writer table tr{
    font: normal 400 18px "宋体";
    height: 40px;
    line-height: 40px;
    cursor: text;
}
#writer table tr span{
    color: red;
}
#writer .tuijian{
    font-weight: 700;
}
/*----------------------------分类模块----------------------------*/
#fenlei{
    width: 900px;
    height: 40px;
    /*background-color: red;*/
    line-height: 40px;
    padding-left: 100px;
    margin-top: 20px;
}
#fenlei table tr a{
    display: block;
    width: 120px;
    height: 30px;
    background-color: #cccccc;
    border:#ccc solid 1px;
    border-radius: 30%;
    text-align: center;
    line-height: 30px;
}
#fenlei table tr a:hover{
    background-color: lightsalmon;
    color: azure;
}
/*----------------------------分享模块----------------------------*/
#share{
    height: 100px;
    margin-top: 20px;
    border-top: #cccccc dashed 1px;
    border-bottom: #cccccc dashed 1px;
}
#share ul{
    width: 800px;
    margin: 40px auto 0;
}
#share ul li{
    float: left;
    margin-left: 40px ;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: white;
    border-radius: 10%;
}
#share ul li a{
    color:white;
}
#share .one{
    background-color: cadetblue;
}
#share .two{
    background-color: red;
}
#share .three{
    background-color: yellow;
}
#share .four{
    background-color: deeppink;
}
#share .five{
    background-color: green;
}
#share ul li:hover{
    box-shadow: 0px 5px 2px 2px rgba(0,0,0,0.1);
    border:#ccc solid 1px;
    cursor: pointer;
}
/*----------------------------文章点赞收藏----------------------------*/
#artical{
    height: 250px;
    width: 970px;
    /*border:#ccc solid 1px;*/
    margin-top: 20px;
    padding: 0;
    position: relative;
    padding-left: 30px;
}
#artical span{
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: deeppink;
    border-radius:50%;
}
#artical .massage{
    display: inline-block;
    margin-left: 20px;
    margin-top: 0;
}
#artical .massage li{
    margin-top: 6px;
}
#artical .recommend_top,
.oppose_top{
    position: absolute;
    height:30px;
    width: 50px;
    background-color: lightsalmon;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    border-radius: 10%;
    color: cadetblue;

}
#artical .recommend_top{
    right:90px;
    top:20px;
}
#artical .oppose_top{
    right: 20px;
    top: 20px;
}
#artical .recommend_bott,
.oppose_bott{
    position: absolute;
    height:20px;
    width: 50px;
    background-color: #ccc;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    font: normal 400 14px "宋体";
}
#artical .recommend_bott{
    right:90px;
    top:50px;
    color: blue;
}
#artical .oppose_bott{
    right: 20px;
    top: 50px;
}
#artical table {
    margin-top: 20px;
}
#artical table tr{

    height: 30px;
}
#artical .shuaxin{
    position: absolute;
    height: 30px;
    display: block;
    right: 1px;
    bottom:5px;

}
#artical .shuaxin li{
    float: left;
    margin-right: 19px;
    font: normal 400 14px "宋体";
}
/*----------------------------历史文章跳转----------------------------*/
#history{
    height: 410px;
    width: 960px;
    /*background-color: lightsalmon;*/
    margin-top: 20px;
    padding-top: 20px;
    padding-left: 40px;


}
#history table{
    margin-top: 20px;
}
#history table tr{
    height: 30px;
}
#history .img{
    height: 200px;

    background: url("images/3.gif") no-repeat ;


}

/*----------------------------底部---------------------------*/
#bottom{
    height: 200px;
    background-color: black;
    /*margin-top: 300px;*/
    padding-top: 20px;
}
#bottom ul{
    width: 600px;
    margin: 20px auto 0;
}
#bottom ul li{
    font-size: 12px;
    height: 30px;
    color:darkgray;
    margin-top: 10px;
    text-align: center;
    line-height: 30px;
}

JS: 

// 寻找id函数
function getId(id) {
    return document.getElementById(id);
}
// -----------------------header改变背景颜色，没用--------------------------------
// ------------------------侧边栏menu设置---------------------------------
getId("menu").onmouseover=function () {
    this.style.border="red solid 1px";
};
getId("menu").onmouseout=function () {
    this.style.border="";
};
getId("menu").onclick=function () {
    if(getId("side_nave").style.display=="block"){
        getId("side_nave").style.display="none";
    }else{
        getId("side_nave").style.display="block";
    }
};
getId("side_nave").getElementsByTagName("span")[0].onclick=function(){
    getId("side_nave").style.display="none";
};

 

 

 

TTLLZZHH
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小网页制作
限定小码农的博客
03-04 553
1.员工信息表 <!doctype html> <html> <head> <meta charset="utf-8"> <title>员工信息登记表</title> <script type="text/javascript"> function changeColor(node) { ...
简单网页的制作
adm3n的博客
07-22 3329
前言： 虽然现在有很多网页模板可以套用，但是不写代码就永远不能进步！ 简单介绍： HTML是一种超文本标记语言，简单来说就是用来做网页的，没有别的脚本语言的加持下只能做静态网页。 在有其它脚本语言JavaScript（JS）和PHP语言的加持下就可以做动态网页，甚至可以做耗费精力和时间的响应式网站。 刚才说的静态网页、动态网页和响应式网站显然都是后话了，到后边还有伪静态网页，这些到后面再讲。 HTML编译器： Dreamweaver和WebStorm 写一个简单网页可以先用记事本 废话不多
一个简单的网页制作作业
05-15
一个简单的网页制作作业，学计算机的应该都会遇到要交这样的一个作业，本人做的是球员雷·阿伦的个人主页，分别介绍了基本资料、技术特点、精彩时刻、技术统计等，每页都有返回首页的链接。希望对初学网页制作的同学有帮助。
【CSS】虚线的两种实现方式
热门推荐
流萤梦的博客
01-14 1万+
最近，在做一个需求，其中涉及到了一个下划线的问题，大概效果要长这样： （前面的文案打了马赛克，可能这个图看着有点奇怪，这不重要，主要是看虚线） 看到这个图的第一反应就是，害，不就是个边框吗，这有啥难的？ ......
简单的小网页（第一次作业）
qq_51779101的博客
05-08 583
任务要求 自己新建个html文件 1.给网页加一个标题。 1.加标题一级和三级标签。 3.加入a标签链接到https://www.baidu.com/，并在a标签里放入一张图片。 4.再加个a标签链接https://www.baidu.com/，写上文字“百度一下，你就知道” 5.加一段话。 6.以上每一条之后都要换行。 <!DOCTYPE html> <html lang="zn-ch"> <head> <meta charset="UTF.
如何使用记事本制作一个简陋的小网页（1）
2301_76445610的博客
09-16 4855
html本质上是一种标签并不是一种语言，其最主要的功能就是对页面设置和页面的文本样式进行修改和修缮。
css贯穿 嵌套
10-23 371
开心网-网页游戏 .q { background: url(03%20%E6%8F%90%E4%BE%9B%E7%BB%99%E5%AD%A6%E5%91%98%E7%9A%84%E4%B8%8A%E6%9C%BA%E7%BB%83%E4%B9%A0%E7%B4%A0%E6%9D%90/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/menuBg.jpg) repea
小网页设计
m0_46846289的博客
10-06 727
分享一个曾经做过的一个网页，感兴趣的童鞋可以看看。 部分代码如下： 总界面 用户登录 ||   个人主页 [ 退 出 ] <div class="search-form"> <a href="#" class="search-logo">| &nbsp;<img src="img/search.png"></a> <input type="search
50个小众且实用的神级网站
Mr_HelloWorldx的博客
03-20 1221
别的不求了，就求个简单的赞吧！PS：内容已经进行了简单分类，为防止过于啰嗦，基本都比较简明扼要，兄弟们可以根据自己的需求挑选查看，请放心食用：）
简单网站搭建教程
weixin_66381188的博客
01-27 586
简单服务器网站制作教程，提供3个官方及非官方物美价廉的服务器，注册域名，解析域名，3个优秀论坛模板
web制作的小网页
galaxyrt的博客
12-08 835
代码css和js部分需要自己创建文件夹加进去 图片也需要自己新建自己的images文件夹插入 效果图： HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> ...
简单的分页制作
K_122的博客
07-20 867
1.制作一个带首页，上一页，下一页，末页这样的页面命名为pageUI.jsp                                       页面代码 （例子，可以参考）                                   总记录数：条
html 个人简易小网站
11-07
是用HTML编写的个人简易小网站，只有简单的页面，没有数据，里面有在网页中插入视频，音乐，图片，表单，以及走马灯等的例子。对刚学HTML的人会有点帮助。
简单的个人小网页制作
01-11
简单的小网页制作，适合初学者，可以观摩，可以Copy！
超级好看的小网页
02-28
超级好看的小网页 简单清晰
制作一个简单HTML电影网页设计（HTML+CSS）
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 ...
一个简单的HTML5网页设计
12-11
一个简单的HTML5网页设计，有多个页面，是一些基本的设计，自己的结课作业，上传吧，所有东西都在压缩包内，有兴趣可以下载了解一下。
一个简单的网页制作期末作业，学生个人html静态网页制作成品代码
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 ...
制作一个简单html网页
最新发布
10-13
好的，以下是一个简单的 HTML 网页示例： ```html <!DOCTYPE html> 我的网页 欢迎来到我的网页！ 这是一个简单的 HTML 网页示例。 随机图片"> ``` 这个网页包含了一个标题、一个段落和一张随机图片。你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值