CSS简单网页示例

最新推荐文章于 2024-05-07 22:37:05 发布
最新推荐文章于 2024-05-07 22:37:05 发布
阅读量796 收藏 4
点赞数 1
分类专栏： css 文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52629592/article/details/125376459
版权

简单今日头条页面实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>今日头条</title>
        <style>
        
            /* 设置body */
            body{
                /* 取消doby的内边距 */
                margin: 0;
            }
            /* 设置最底层标签d1 */
            .d1{
                /* 设置底层标签的大小 */
                width: 1200px;
                height: 805px;
                /* 设置底层标签的位置 */
                margin: 0 auto;
                padding: 0;
                top: 0;
                /* 设置底层标签的颜色 */
                background-color:  #FFFFFF; 
            }
            .box1,.box2,.box3{
                /* 设置背景颜色 */
                background-color:  #FFFFFF;
                padding-bottom: 5px;
            }
            /* 设置图片的样式 */
            .img_box{
                margin: 0;
                padding: 0;
                float: left;
            }
            .box1{
                /* 设置第一个标签的大小 */
                width: 100%;
                height: 85px;
                
            }
            .d2{
                float: right;
                padding: ;
            }
            /* 设置按钮的样式 */
            .d1 button{
                /* 设置登录按钮的大小 */
                width: 64px;
                height: 38px;
                /* 设置按钮及字体颜色 */
                background-color: #ff4c4c;
                color: #ffffff;
                /* 设置外边距 */
                margin-left: 68px;
                margin-right: 68px;
                margin-top: 25px;   
                border-radius: 5px;
                border-color: #FFFFFF;
            }
            .box2 ul{
                /* 清除原有图标 */
                list-style-type: none;
                /* 设置大小 */
                width: 190px;
                height: 396px;
                padding: 0;
                float: left;
            }
            .box2 li{
                /* 设置大小 */
                width: 100%;
                height: 40px;
                /* 设置位置 */
                line-height: 40px;
                text-align: center;
                color: #333333;
                border-radius:5%;
            }
            .middle1 li:hover{
                background-color: #ed4040;
                color: #FFFFFF;
            }
            .box2 .firstli{
                background-color: #ed4040;
                color: #FFFFFF;
            }
            .middle2{
                /* 设置大小 */
                width: 700px;
                height: 396px;
                background-color:  #FFFFFF; 
                float: left;
                margin-top: 20px;
            }
​
            .title{
                /* 设置大小 */
                width: 72px;
                height: 48px;
                font-size: 18px;
                background-color: #FFFFFF;
                color: #333333;
                margin-bottom: 0;
                /* 设置边框 */
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: #ff4c4c;
            }
            /* 设置标题底部边框 */
            .middle2 h2{
                /* 设置边框 */
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: #E8E7E3;
            }
            /* 设置链接标题 */
            .box2 .middle2 .link_title{
                font-size: 20px;
                color: #000000;
                text-decoration: none;
            }
            /* 设置链接标题的移入效果 */
            .box2 .middle2 .link_title:hover{
                color: red;
                text-decoration: underline;
            }
            /* 设置涉及到时间的文字 */
            .box2 .time{
                color: #999999;
                font-size: 13px;
            }
            .box2 .middle2 .link_but{
                width: 30px;
                height: 23px;
                line-height: 13px;
                background-color: red;
                color: #FFFFFF;
                font-size: 13px;    
            }
            .box2 .middle2 .main_conten{
                background-color: #FFFFFF;
                width: 240px;
                float: left;
            }
            .box2 .middle2 img{
                width: 240px;
                height: 160px;
                float: left;
            }
            .box2 .middle3{
                width: 300px;
                height: 582px;
                background-color: #FFFFFF;
                float: left;
                margin-top: 20px;
            }
            .box2 .middle3 .link_puc_right{
                width: 120px;
                height: 80px;
                float: left;
            }
            .box2 .middle3 .main_conten{
                line-height: 50px;
            }
            .box2 .middle3 img{
                width: 50px;
                height: 50px;
                position: relative;
                top: -100px;
                left: 150px;
            }
            .box2 .middle3 .link_title{
                color: #333333;
                text-decoration: none;
            }
            .bottom_text{
                width: 400px;
                font-size: 12px;
                color: #333333;
                margin-left: auto;
                margin-right: auto;
                text-decoration: none;
            }
            .bottom_link{
                text-decoration: none;
                color: #333333;
            }
        </style>
    </head>
    <body>
        <!-- 最底层标签,用于布局整个界面的位置等 -->
        <div class="d1">
            <!-- 第一行,用来填入顶部的图片 -->
            <div class="box1">
                <img src="../img/logo.png" class="img_box"/>
                <img src="../img/advert.jpg" class="img_box"/>
                <div class="d2">
                    <a href="#">
                        <button type="submit">登录</button>
                    </a>
                </div>
            </div>
            <!-- 中间部分,用来设置网页主体 -->
            <div class="box2">
                <!-- 中间部分的左边区域 -->
                <div class="middle1">
                    <ul>
                        <li class="firstli">最新发布</li>
                        <li>新闻快报</li>
                        <li>国内新闻</li>
                        <li>国际新闻</li>
                        <li>人文风景</li>
                        <li>科技创新</li>
                        <li>创业俱乐部</li>
                        <li>区块链</li>
                        <li>互联网</li>
                    </ul>
                </div>
                <!-- 中间部分的右边区域 -->
                <div class="middle2">
                    <h2>
                        <span class="title">最新发布</span>
                    </h2>
                    
                    <div class="main_conten">
                        <a href="#" class="link_title">文章标题</a>
                        <div class="text">
                            <div class="time">发布于2022-4-23</div>
                            <div class="conten">文章摘要...</div>
                            <a href="" class="link_but">互联网</a>
                            <span>阅读(1024)</span>
                        </div>
                        
                        <a href="" class="link_puc"><img src="../img/c7y2lxc4ww6kelwdfz.jpg"</a>
                        
                    </div>
                    
                    <div>
                        <a href="#" class="link_title">[腾讯云]12.22云上特惠,云产品限时抢购</a>
                        <div class="">
                            <div class="time">发布于2022-3-06</div>
                            <div class="conten">腾讯云11.11云上盛惠,精选热门产品助理上云,云服务器首年88元起,买的越多,返的越多,最高返5000元!</div>
                            <a href="" class="link_but">互联网</a>
                            <span>阅读(564)</span>
                        </div>
                            <a href=""><img src="../img/cb0wihpicadc7i4hf6.jpg"</a>
                        
                    </div>
                </div>
                <!-- 中间部分的右边区域 -->
                <div class="middle3">
                    <h2>
                        <span class="title">置顶文章</span>
                    </h2>
                    
                    <div class="main_conten">
                        <a href="#" class="link_title">文章标题</a>
                        <div class="time">2022-4-04</div>
                        <img src="../img/c7y2lxc4ww6kelwdfz.jpg" class="link_puc_right"/>
                        <a href="" class="link_title">[腾讯云]12.11云上盛惠,云产品限...</a>
                        <div class="time">2022-4-15</div>
                        </div>
                        <img src="../img/cb0wihpicadc7i4hf6.jpg" class="link_puc_right"/>
                </div>
            </div>
            <!-- 底部,用来设置友情链接 -->
            <div class="box3">
                <h3>友情链接</h3>
                <a href="" class="bottom_link">百度&nbsp;</a>
                <a href="" class="bottom_link">新浪&nbsp;</a>
                <a href="" class="bottom_link">腾讯&nbsp;</a>
                <a href="" class="bottom_link">淘宝</a>
            </div>
            <!-- 最底部,用来放置转义符号等信息 -->
            <div class="bottom_text">
                <div>&copy;2021 今日头条 京公网安备 11000000000号</div>
                <div>联系电话: 400-156-138</div>
                <span>公司名称: 北京字节跳动科技有限公司 </span>
                <span><a href="" class="bottom_link">管理员登录</a> </span>
            </div>
        </div>
    </body>
</html>
​

  • 运行结果如下:

     

不会写代码的菜
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html css制作的简单网页（可供练习）
qq_63533863的博客
03-08 1516
代码图片在这里： <!DOCTYPE html> <html lang="en"> <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"> &l...
CSS-200个小案例（一）
qq_55154022的博客
12-15 2911
最近我在youtube上跟着大神学习200个CSS小案例，作者Online Tutorials 编码的内容很实用，案例中涉及定位、变换、动画等概念，适合进一步学习和巩固CSS知识，能帮助我们实现页面的特效。
HTML+CSS之CSS案例大全
weixin_62575733的博客
05-07 916
CSS 1.体验css语法规范 <!DOCTYPE html> <html lang="en"> <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"> <
0901静态网页制作DIV+CSS
qq_44787933的博客
09-01 1027
一、块元素和内联元素 1、块元素 独占一行 可以定义宽度和高度 常用div、p、ul、li 2、内联元素 一行排列显示 不能定义宽度和高度 常用span、a、label 3、div和span标签 最大优点：没有任何的默认样式渲染 最大区别：div标签是块元素，span标签是内联元素 作用： 1、结构化HTML元素 2、DIV+CSS网页布局 3、提高网页加载速度 经验： div和span标签可以相互转换（display属性） 规范角度而言，span标签中不能内嵌div标签 CSS 1、什么是CSS Casc
Night小课堂07 CSS常用网页样式
NoNight_Zzz的博客
05-17 346
本篇文章主要讲了一些CSS常用网页的样式
30个HTML+CSS前端开发案例（完结篇）
热门推荐
终成大师的博客
02-14 1万+
30个HTML+CSS前端开发案例（完结篇）
简单的HTML、CSS和JavaScript结合的网页示例
最新发布
07-02
简单的HTML、CSS和JavaScript结合的网页示例
HTML和CSS简单网页参考
06-04
在"HTML和CSS简单网页参考"这个压缩包中，你将找到一个基础的网页开发教程，特别适合初学者。HTML是用来创建网页的基本语言，它通过一系列标签来标记文本，比如`<html>`、`<head>`、`<body>`、`<h1>`、`<p>`等，这些...
纯html加css简单网页.zip
07-18
【标题】"纯html加css简单网页.zip"揭示了这个压缩包内容的核心——一个基于HTML和CSS构建的基础网页示例。HTML（HyperText Markup Language）是网页内容的标准标记语言，而CSS（Cascading Style Sheets）则用于描述...
简单的HTML、CSS和JavaScript组合的网页设计示例
02-26
通过学习和实践这个简单的HTML、CSS和JavaScript组合的网页设计示例，你可以逐步掌握网页开发的基本技能，为创建更复杂、功能丰富的网站打下坚实基础。不断练习和熟悉这三大核心技术，将有助于你成为一名出色的前端...
CSS网格布局的示例代码
09-27
总之，CSS网格布局通过提供直观的二维布局机制，使得创建复杂且响应式的网页布局变得简单。通过理解并熟练掌握`display: grid;`、`grid-template-columns`、`grid-template-rows`、`fr`单位和`repeat()`函数，开发者...
CSS 基础入门：从零开始构建专业级网页样式
m0_73442777的博客
06-17 2885
进入创意的CSS世界！我们的文章将带你探索CSS基础，为你的网页设计提供强大的视觉效果和布局控制。无论你是初学者还是有经验的开发者，我们的指南将为你提供从选择器到盒模型的详尽解析。学习如何运用CSS样式来改变字体、颜色和背景，以及如何创建响应式的网页布局。从这里开始你的CSS之旅，将你的网页设计提升到一个全新的水平。准备好发挥创意并让你的网页脱颖而出了吗？让我们一起深入CSS基础的世界，开启无限可能！
HTML+CSS网页制作成品—— html+css+javascript 绿色的随行旅游网页设计实例 企业网站制作
而风不止
01-08 3277
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥
CSS一些简单的样式
weixin_43641202的博客
03-28 626
CSS文本样式字体属性字体类型字体大小字体风格字体粗细字体属性文本样式文本颜色水平对齐方式首行缩进和行高文本装饰垂直对齐方式 字体属性 字体属性就如之前用到的font-size属性，可以设置字体大小，除此之外还可以定义字体类型、字体是否加粗、字体风格等。 属性名 含义 示例 font-size 设置字体大小 font-size:12px; font-family 设置字体类型 font-family:“微软雅黑”; font-style 设置字体风格 font-style:itali
HTML+CSS实例（米柚页面）
qq_56610467的博客
11-24 1746
米柚页面 基于HTML+CSS纯静态网络页面实例概述： 纯静态页面实现，没有js相关内容故难度不大，要求要会HTML基本的标签用法和CSS基本样式用法即可完成，页面的框架搭建是使用组合完成，图片使用，位置调整效果： 实现分析：首先我们要知道素材的基本参数（颜色&长宽）使用HBuilder X找到图片颜色属性 使用电脑画图工具找颜色/长宽 根据图片素材以及页面实现后的展示，可以分析出整个页面都是以的宽度居中后，形成的一条中轴线，其他的布局都是以的宽度进行的操作。下一步，分析页面图片的一个插入方式，不是所有的图
30个HTML+CSS前端开发案例（五）
终成大师的博客
02-13 4746
30个HTML+CSS前端开发案例（五）
怎样用HTML&CSS写出一个简单的网页
qq_66912943的博客
07-01 3319
制作一个简易的HTML
分享 10 个常见的 CSS 页面布局代码片段
前端达人
02-20 6734
大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。1、Card layo...
html css网页制作示例
05-07
HTML和CSS是网页制作的基础技术，它们可以实现网页的结构和样式。以下是一个简单的网页制作示例： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>示例网页</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>示例网页标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <section> <h2>欢迎来到示例网页！</h2> <p>这是一个用HTML和CSS制作的示例网页。</p> <p>在这个网页中，你可以看到头部、导航、主要内容区域和底部等基本网页结构。</p> <p>同时，我们还使用CSS来为网页添加了样式和布局，让网页更加美观和易于阅读。</p> </section> </main> <footer> <p>版权所有 © 2022 示例网页</p> </footer> </body> </html> ``` CSS代码（style.css）： ``` body { margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; background-color: #f7f7f7; } header { background-color: #333; color: #fff; padding: 20px; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin-right: 20px; } nav li:last-child { margin-right: 0; } nav a { color: #fff; text-decoration: none; } main { margin: 20px auto; max-width: 800px; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); } section h2 { font-size: 28px; margin-bottom: 10px; } section p { margin-bottom: 20px; } footer { text-align: center; padding: 10px; background-color: #333; color: #fff; } ``` 以上示例展示了一个简单的网页结构，包括头部、导航、主要内容区域和底部等基本元素，同时使用CSS为网页添加了样式和布局。当你在浏览器中打开这个示例网页时，你会看到一个具有基本美学的页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不会写代码的菜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值