css制作新浪网页 |css文字和图片并排

/* 页面主体部分样式 */
body {
font-family: Arial, sans-serif;
background-color: #fff;
color: #333;
}
/* 顶部导航栏样式 */
#top-nav {
background-color: #f6f6f6;
height: 40px;;
padding: 10px;
box-sizing: border-box;
}
/* logo样式 */
#logo {
font-size: 24px;
color: #f90;
font-weight: bold;
float: left;
margin-right: 50px;
}
/* 导航链接样式 */
#nav-links {
float: left;
}
#nav-links a {
display: inline-block;
margin-right: 20px;
color: #333;
text-decoration: none;
font-size: 16px;
}
/* 搜索框样式 */
#search-input {
border-radius: 20px;
border: none;
padding: 10px 20px;
background-color: #ddd;
margin-right: 20px;
width: 200px;
box-sizing: border-box;
font-size: 14px;
float: left;
}
/* 搜索按钮样式 */
#search-button {
border-radius: 20px;
border: none;
padding: 10px 20px;
background-color: #f90;
color: #fff;
font-size: 14px;
float: left;
}
/* 主要内容区样式 */
#content {
width: 960px;
margin: 0 auto;
padding-top: 20px;
}
/* 新闻列表样式 */
.news-list {
margin-top: 40px;
}
.news-list li {
display: flex;
border-bottom: 1px solid #ccc;
padding: 20px 0;
}
.news-list li .thumbnail {
width: 200px;
height: 120px;
background-color: #ddd;
margin-right: 20px;
}
.news-list li .content {
flex: 1;
}
.news-list li h3 {
font-size: 20px;
}
.news-list li p {
font-size: 16px;
color: #999;
}
/* 页脚样式 */
#footer {
background-color: #f6f6f6;
height: 100px;
margin-top: 40px;
text-align: center;
line-height: 100px;
font-size: 14px;
}

使用以上CSS样式，大家可以制作出一个简单的新浪网：

以上就是大家制作新浪网页面的步骤以及所需的CSS样式，希望对您有所帮助。