首页

最新推荐文章于 2024-04-21 11:35:11 发布
最新推荐文章于 2024-04-21 11:35:11 发布
阅读量206 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gh323093/article/details/78406691
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/day_02.css" rel="stylesheet">
</head>
<body>
<div class="box">
    <ul class="nav clear">
        <li><a href="#">博客首页</a></li>
        <li><a href="#">娱乐</a></li>
        <li><a href="#">体育</a></li>
        <li><a href="#">文史</a></li>
        <li><a href="#">女性</a></li>
        <li><a href="#">股票</a></li>
        <li><a href="#">教育</a></li>
        <li><a href="#">星座</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">设计</a></li>
        <li><a href="#">育儿</a></li>
        <li><a href="#">旅游</a></li>
        <li><a href="#">收藏</a></li>
        <li><a href="#">时尚</a></li>
        <li><a href="#">图片</a></li>
        <li><a href="#">悦博</a></li>
        <li><a href="#">博客地图</a></li>
        <li><a href="#">全媒体影响力排行榜</a></li>
    </ul>
</div>

<div style="width: 920px;height:400px; margin-top: 10px">
    <div style="width:306px;height:133px; float:left;" >
        <img src="img/zuoye_01.jpg" style="width: 306px">
    </div>

    <div style="width:306px;height:400px; float:left;">
        <h2 style="color: #CE636C;">“油腻中年猥琐男”到底猥琐在哪儿了?</h2>
        <p class="duan1">聚焦，贼喊捉贼!!!聚焦，贼喊捉贼!!贼喊捉贼!!</p>
        <p class="duan1">聚焦，贼喊捉贼!!!聚焦，贼喊捉贼!!贼喊捉贼!!</p>
        <h2 style="color: #CE636C;">宋仲基宋慧乔世纪婚礼竟然如此低调？</h2>
        <p class="duan1">双宋结婚场地曝光！双宋结婚场地曝光,结婚场地曝光！</p>
        <hr />
        <ul class="lu">
            <li class="lu">老有所依，老有所依,老有所依老有所依</li>
            <li class="lu">文化自信源于内心对中华文化的敬仰文化自信源于内心对中华文化的敬仰/li>
            <li class="lu">别问为何突然联系你，因为我还记得你</li>
            <li class="ll">明星24节气播报：严屹宽张歆艺分享养生秘笈</li>
            <li class="lu">史话 | 古代枕头又硬又冷，古人为何如此自虐</li>
        </ul>

    </div>

    <div style="width: 306px; height: 150px; float: left" >
        <h2 style="text-align: center;">新浪博友，欢迎回来！</h2>
        <p style="text-align: center;color: red;">登陆后，可以按照您的兴趣设置</p>
        <form action="" method="post">
            <input  style="margin: 10pt;" placeholder="微博/博客/邮箱/手机号" /><br />
            <input style="margin: 10pt;" type="password" placeholder="输入密码"  /><br />
            <input style="margin: 10pt; background: #FF6600; width: 100px; height: 40px; color: #ffffff"
                   type="submit" value="登录" />
            <input style="margin: 10pt;" type="checkbox" />下次自动登录<br />
        </form>
        <a  href="#" class="aa">忘记密码</a>&nbsp;&nbsp;<a href="#" class="aa">立即注册</a>
        <a href="#" class="aa" style="float: right;">帮助中心</a><br />

        <img src="img/zuoye_02.jpg" style="width: 307px; margin-top: 8px">
    </div>
</div>
</body>
</html>



style文件



*{
    margin: 0 auto;
    padding: 0;
}
.box{
    background: goldenrod;
    padding: 10px;
    width: 900px;
    margin: 0 auto;
    margin-top: 18px;
}
.clear:after{
    content: "\200B";
    display: block;
    width: 0;
    height: 0;
    clear: both;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.nav li{
    float: left;
    height: 18px;
    margin: 4px;
    line-height: 18px;
}
.nav li a{
    color: #ffffff;
}
a:hover{
    padding: 10px;
    background: darkgoldenrod;
}
.tupian{
    width: 298px;
    height:418px;
    margin-left: 223px;
    margin-top: 10px;
}
.zt{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
}

gh323093
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java制作主页,JSP教程基础篇之简单首页制作
weixin_30193461的博客
03-11 1395
JSP教程基础篇之简单首页制作欢迎使用本JSP教程技术—制作动态内容网页的方法。如果你希望学习这篇教程的话，我想你一定是这项技术的新手。你可能想成为一名利用JSP技术开发网络应用程序的程序员或者网页设计师。本JSP教程中包含了一系列JSP的技巧和一些简单的代码的写法，每一步都举了一组例子来讲述原理。我建议你在学习本JSP教程之前先去看一看FAQ，了解如果配置你的服务器好让他能支持并运行JSP。那样...
newduba首页怎么去掉_【主页劫持】关于浏览器主页被劫持到毒霸网址大全的解决方法...
weixin_39737240的博客
12-19 3996
摘要亲爱的360浏览器用户们近期我们收到不少用户反馈浏览器主页被劫持到https://www.duba.com/?f=qd_numswdh&开头的毒霸网址大全，经技术联系用户排查劫持的原因是金山毒霸用命令行加参数修改了主页。劫持网址样例https://www.duba.com/?f=qd_nu…亲爱的360浏览器用户们近期我们收到不少用户反馈浏览器主页被劫持到https://www.dub...
Chrome主页为360首页
qq_34796705的博客
07-01 2264
chrome默认360首页，360首页无法修改
使用HTML制作一个简单的个人主页
热门推荐
indulgexiaomei的博客
10-09 20万+
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
linux如何配置主页内容,自定义Apache Web服务的首页内容
weixin_42511201的博客
05-13 1683
导读编写index.html文件，自定义Apache Web服务的首页内容。1. 安装Apache[root@localhost ~]# yum install -y httpd2. 修改/etc/httpd/conf/httpd.conf配置文件[root@localhost ~]# vim /etc/httpd/conf/httpd.conf在 vim 中，快速定位到 第 95行命令模式下 输...
Github自定义个人首页
一名机电研究生的博客
05-30 1万+
GitHub 个人主页，官方称呼是 profile，是一个以 Markdown 脚本语言编写的个人 GitHub展示主页面。Guthub 个人主页可以展示很多有用的信息，例如添加一个首页被访问次数的计数器，一个Github被 Star 与 Commit 的概览信息，以及各种技能标签，设备标签等，还可以利用 wakatime 显示你最近编码各类语言的使用时长，以及你最近 Steam 游戏游玩排行榜。本文主要介绍了如何创建 Github 个人主页以及美化个人主页，通过使用一些功能组件，提升主页功能性和视觉效果。
简化安卓操作：利用ADB命令返回主页、首页等操作
最新发布
效率工具，软件测试，实用干货，资源分享，这里全是黑科技。
04-21 1147
利用ADB（Android Debug Bridge）命令，我们可以在不触摸设备的情况下轻松地返回到主页、首页等操作，从而提高操作效率。通过利用ADB命令，我们可以在不触摸设备的情况下实现返回主页、返回上一层、锁定屏幕、唤醒屏幕等操作，从而提高设备操作的效率。这个命令会模拟按下设备的“任务管理器”按钮，将您带回到最近使用的应用程序。这个命令会模拟按下设备的“返回”按钮，将您返回到上一个浏览的界面。这个命令会模拟按下设备的“唤醒/休眠”按钮，将设备屏幕唤醒。
html搜索引擎主页,分析首页链接：/和/index.html
weixin_39960793的博客
06-03 1991
上个周末，一个网友和我分享自己做优化的经验，其中一点说到：在做首页链接的时候，喜欢把一部分网址用/index.html网址而不是/结尾。因为这样蜘蛛可以爬取两次。网友的这段话，有很多我不赞成的地方。那么首页链接是/还是/index.html好？首先，用http://www.*****.com/index.html作为首页链接，等于你用你的一个一级页面index.html和人家的网站跟目录/相比，这...
用html语言制作个人首页,利用html/css设计一个简单个人主页
weixin_35676939的博客
05-31 7471
本次作业要求设计个人主页我的代码及效果效果 代码 !doctype html html head meta charset utf-8 title 个人主页设计 /title style type text/css .paragraph { background-image: url(wufan.jpg); background-repeat: no-repeat; background-posi...
html怎么做qq空间主页,QQ空间首页布局
weixin_29301059的博客
06-09 1025
html>QQ空间首页布局body,ul,li{margin:0;padding:0;}body{margin:0px;padding:0px;background-color:lightskyblue;background-image:url("img7.jpg");background-repeat:no-repeat;background-size:cover;}.na...
百度主页源码 百度主页源码
06-16
百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页源码百度主页...
超级漂亮的个人主页源码
04-10
【标题】"超级漂亮的个人主页源码"所指的是一个用于创建独特且美观的个人主页的源代码。在互联网上，个人主页是展示个人形象、作品、技能和联系方式的重要平台，而这款源码则提供了实现这一目标的一个高效且设计精美...
首页卫士 防止修改主页 篡改主页 更改主页软件 防止恶意修改主页
09-19
【标题】"首页卫士"是一款专注于保护用户浏览器主页安全的软件，它的主要功能是防止未经授权的程序或恶意软件擅自修改、篡改或更改用户的浏览器主页设置。在互联网使用过程中，用户通常会设定一个习惯的主页，这个...
web前端携程首页
11-10
【标题】"Web前端携程首页"是一个项目，它利用了HTML5、CSS和JavaScript的核心技术，结合jQuery库，来实现一个类似于携程旅行网的首页功能。这个项目旨在展示Web前端开发的基本技能，以及如何将这些技能应用于实际的...
漂亮的html首页
04-12
在"FlatfyTheme"中，CSS文件很可能是用来定义这个首页的独特风格和布局的。 JavaScript是前端开发的关键技术，它提供了动态交互的能力。在HTML首页中，JavaScript文件通常用于处理用户交互，如导航菜单的展开与关闭...
实现购物车结算功能：批量/全部删除，全选，单价/总价，数量增减，页面隐藏/显示
gh323093的博客
11-21 4722
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> .mouse_color{ background-color: #cccccc; } .num{
添加姓名与邮箱email
gh323093的博客
11-11 3445
html> html ng-app="app"> head> meta charset="utf-8" /> title>模拟title> style> span{ font-family: 楷体; font-size: 14px; color: red; }
包含敏感词与查询
gh323093的博客
11-17 2476
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="../angular-1.5.5/angular.min.js">script> style> .xz{ background: #00b0e0;
商品入库、删除
gh323093的博客
11-22 1500
html> html> head> meta charset="utf-8" /> title>Titletitle> script src="../angular-1.5.5/angular.min.js">script> script src="../jquery-1.11.1/jquery-3.2.1.min.js">script> link rel
新手学习前端之js模仿淘宝主页网站
10-21
淘宝网首页的布局和样式都是通过html和css来实现的，这些知识是前端开发的基础，通过模仿淘宝主页网站，我们可以加深对html和css的理解，掌握它们的运用。 除此之外，模仿淘宝主页网站还可以帮助我们学习响应式布局...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值