base.css的内容（放基础公共样式）

已于 2023-07-07 11:40:47 修改
阅读量738 收藏 8
点赞数 2
分类专栏： CSS 文章标签： css html 前端
于 2022-09-28 18:18:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72322475/article/details/127094513
版权

使用的时候，在html的<head></head>里调用   /    复制需要的部分去e.g index.css里面 

 base.css的内容:

/* 清除默认样式代码 */
/* 去除常见标签默认的 margin 和 padding */
* {
    margin: 0;
    padding: 0;
}

/*去除所有元素由于加了边框让盒子变大的情况*/
* {
    box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
    font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
        "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
    list-style: none;
}
/*让button 按钮 变成小手*/
button {
  cursor: pointer;
}
/* 让所有斜体不倾斜 */
em,
i {
    font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
    text-decoration: none;
    color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
    vertical-align: middle;
}

/* 去除input默认样式 */
input,
button {
    cursor: pointer;
    border: none;
    outline: none;
    color: #333;
}

/* 左浮动 */
.fl {
    float: left;
}

/* 右浮动 */
.fr {
    float: right;
}

/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
weixin_62613321的博客
02-12 1546
清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
Vue之 清除默认样式 && 公共样式CSS文件
wwyxjjz的博客
08-20 1946
vue项目绝绝子必用的公共CSS文件，做个备份吧 /* CSS清除默认样式代码 */ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin: 0; padding: 0; } * { ...
前端清除默认样式
weixin_44178497的博客
11-21 749
【代码】前端清除默认样式。
网页重置样式表
09-09 916
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font
前端浏览器默认样式去除
qq_45797783的博客
07-26 917
浏览器为了显示方便和美观，很多都会为html文件设置默认样式 但是不同浏览器显示效果会不一样，导致显示效果不一样，实际开发当中我们应该去除浏览器的的样式 方法一： *{ margin: 0px; padding: opx; } 可以去除所有元素的内边距和外边距，但会有残留的默认样式。 方式二： 链接：https://pan.baidu.com/s/1rhDryEeIdkhrMDAKrKCIl..
CSS规范：base.css
技术成就梦想，知识改变命运 !
12-19 3580
body, div, dl, dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote，th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} a
base.css
qq_40285497的博客
06-17 1263
基础的css样式 *, *::before, *::after { box-sizing: border-box; } html,body{ height: 100%; width: 100%; } body{ margin: 0; line-height: 1.5; font-family:"微软雅黑","黑体","宋体"; } /*语义化标签*/ articl...
公共样式，基本样式，base.css（最新版）
12-18
公共样式，基本样式。几百行不换行的样式，方便打包发布不出现问题。 其中有涉及修改浏览器的默认样式，如：ul-li标签，图片的水平对齐等等。 常用颜色，常用边框，常用内边距外边距的值，字号等等方便快速布局。
HTML + CSS 的基础公共样式
旺仔做前端的博客
06-21 447
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, o.
浅谈vue.js导入css库(elementUi)的方法
10-18
上述代码中，首先通过import语句引入了Element UI的核心模块，并且引入了Element UI默认主题的CSS样式文件。最后，通过Vue.use()方法将Element UI注册为Vue的插件，使其成为全局可用。 到这里，你就完成了在Vue.js...
前端 HTML5/css3 去除默认样式
06-30
去除默认样式
常用基本样式base.css
07-29
常用基本样式，提高css样式的复用性，少写许多复用的样式。
vue-cli项目引入assets里的css样式出错
Joey-Wong的博客
12-06 9749
vue-cli项目引入assets里的css样式出错在写个人项目的时候，引入了阿里云字体库，如下所示：然后再Login.vue组件里引入样式表 然后npm run dev就出问题了之前我这样做在其他的项目中没出现问题，后来看到这个问题，和我的问题很像，这里写链接内容 于是我在用相同的方法引入测试的样式表，没出现问题最后定位问题出现在这： 左侧的是我之前写的没问题的，右侧的是出问题了的，可以
web前端（10）—— 浮动，清除默认样式
dingyu6453的博客
11-15 593
文档流 web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”，就跟编程语言一样，都是由上而下 而设计软件 ，想往哪里画东西，就去哪里画 文档流带来的最明显的现象就是一行写不完换行写 自动换行，一行写不满，换行写 如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字 文档流还有其他现象 底部...
base CSS
weixin_33674976的博客
05-14 160
转载于:https://www.cnblogs.com/liuliang389897172/p/9035955.html
适用于所有页面的基础样式base.css
weixin_34051201的博客
05-22 1273
这玩意，俗称base.css 几乎所有的页面，在搭建之前，都要用下面那个。BUT /*还在用这个？过时了吧？*/ *{ margin:0; padding:0; } 复制代码一网打尽并不是最全的，最好的。还是要讲究需要什么用什么，小白知道怎么用就行了，而对于追求更高层次的而言，不仅要知其然，还要知其所以然。 什么文本域、什么a链接的默认下划线，通通都一边呆着去。我把这个base.css准备...
``` base ```base.html没有
最新发布
01-22
好的，让我们详细了解一下如何创建和使用 `base.html` 文件。这个文件通常用于定义网页的基本结构以及公共元素（如头部、导航栏、脚部等），然后其他页面可以通过继承它来减少重复代码并保持一致性。 对于你提到的五行八卦算命网页来说，我们需要构建一个包含基本HTML结构及必要样式引用的基础模板 `base.html`。之后，在此之上可以扩展出各个具体的功能页面，例如主页 (`index.html`) 或者结果显示页 (假设是 `result.html`)。 ### 创建 `base.html` 在项目的 `templates` 目录下新建名为 `base.html` 的文件，并向其中写入以下内容： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}五行八卦测算{% endblock %}</title> <!-- 引入自定义CSS --> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> </head> <body> <header> <nav> <ul> <li><a href="{{ url_for('home') }}">首页</a></li> {% comment %} 这里还可以根据需要添加更多链接项 {% endcomment %} </ul> </nav> </header> <main role="main" class="container"> {% with messages = get_flashed_messages() %} {% if messages %} <section aria-live="polite"> <ul id="flash-messages"> {% for msg in messages %} <li>{{ msg }}</li> {% endfor %} </ul> </section> {% endif %} {% endwith %} {% block content %} <!-- 内容将由子模板填充此处 --> {% endblock %} </main> <footer> <p>© 2023 - 我们的五行八卦测算法</p> </footer> <!-- JavaScript 和额外插件可在此引入 --> <script src="{{ url_for('static', filename='script.js')}}"></script> </body> </html> ``` 在这个基础上，你可以继续定制化地修改你的站点布局和服务条款等内容。 ### 使用 Jinja2 继承机制 接下来就是让其他的 HTML 文件能够复用这部分代码了。我们已经在上面留好了两个重要的“占位符”，分别是 `{% block title %}` 和 `{% block content %}`。这些占位符使得每个衍生出来的特定页面可以在不改变整体框架的前提下更改标题或主要内容区域的内容。 举例而言，这是更新后的 `index.html` 示例： ```html {% extends "base.html" %} {% block title %}五行八卦测算 | 首页{% endblock %} {% block content %} <div class="container mt-5"> <h1>欢迎来到五行八卦测算系统</h1> <form action="{{ url_for('show_result') }}" method="post"> <label for="name">姓名:</label><br> <input type="text" id="name" name="name"><br> <label for="birth_year">出生年份:</label><br> <input type="number" min="1900" max="2030" step="1" id="birth_year" name="birth_year"><br> <button type="submit" class="btn btn-primary">查询运势</button> </form> </div> {% endblock %} ``` 同样地，“结果”页面也可以这样去构造其独有的部分，而共享相同的顶部菜单和其他全局设置。 希望这能帮助到你完成更完善的项目！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值