css网页通用布局1（直接调用）

最新推荐文章于 2022-03-15 14:49:44 发布

桃心雨

最新推荐文章于 2022-03-15 14:49:44 发布

阅读量255

点赞数 1

分类专栏： web前端文章标签： css html js

本文链接：https://blog.csdn.net/qq_44324230/article/details/107617025

版权

本文介绍了CSS网页通用布局的实现，通过示例展示布局效果，帮助理解如何直接调用并应用到网页设计中。

摘要由CSDN通过智能技术生成

css网页通用布局1

效果图
在这里插入图片描述

。
。
。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局(runoob.com)</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcol

最低0.47元/天解锁文章

桃心雨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css网页通用布局1（直接调用）

**css网页通用布局1**效果图。。。。<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>* { box-sizing: border-box;} body { font-family: Arial; padding: 10px; backgroun
复制链接

扫一扫