CSS页面布局（类似微博页面）

最新推荐文章于 2022-07-31 00:18:58 发布

lalalawxt

最新推荐文章于 2022-07-31 00:18:58 发布

阅读量3.1k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/lalalawxt/article/details/79277175

版权

这篇博客通过CSS展示了如何创建类似微博的页面布局，包括设置背景颜色、主页面的宽度和居中、字体样式、横向列表、头像悬停效果、输入框和按钮样式、头条样式以及内容展示等。博客探讨了不同CSS属性的使用，如min-height、font-family、opacity、filter、width、height等，以及布局中的一些关键设计点。

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

<!Doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>task1腾讯微博</title>
		<style type="text/css">
        body{
            background-color:rgb(39, 40, 34);
        }
		/*设置主页面格式大小和居中*/
		 .main{
		 	width: 600px;
		 	margin: auto;
            background-color:rgb(255, 255,255);
            padding:10px;
            min-height:600px;/*我想设置页面大小的高度，让这个看起来不那么别扭，值应该设置多少*/
		 }
		 /*设置字体*/
		 .bgfont {
		 	font-family: font-family:"Times New Roman", Times, serif; /*字体类型的设置，一般设置什么类型？*/
		    font-size: 24px;
		}
         /*设置横向列表*/
         ul{
            list-style-type:none;
         }
         ul.chatHead{
         	margin: 0;
         	padding: 0;
         	float: left;
         }
         ul.chatHead li{
         	display: inline-block;
         }
         /*设置头像悬停透明效果*/
         ul.chatHead img{
         	opacity: 0.4;
         	filter:alpha(opacity=40);/*IE8及更早的版本*/
         	width: 30px;
         	height: 30px;
         }
         ul.chatHead img:hover{
         	opacity: 1.0;
         	filter:alpha(opacity=100);
         }
         /*设置输入框样式*/
         input[type="text"]{
         	width: 200px;
         	height: 25px;
         	margin-right: 10px;
         	margin-bottom: 10px;
         	float: le