把CSS好好改了改,现在好看多了

该博客主要展示了一系列CSS样式代码,涉及背景颜色、高度、对齐方式等设置,还使用了背景图片,同时对边框样式进行了定义,如边框宽度、颜色等,涵盖了网页不同元素的样式设计。

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

#top {
 background-color : #5AAA6B;
 height: 100px;
 vertical-align: middle;
    background-image:url(http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/donny2000/65930/o_BlogBanner.gif);
 background-repeat:no-repeat;
}
a{ 
 color : #006600;
}
h1 { 
 margin : 0px;
 padding-top : 5px;
 font-size : 0;
             margin-top : 0px;
}
h1 a:visited,
h1 a:active,
h1 a:link,
h1 a:hover {
 color : #FFF;
 margin-left : 0px;
 margin-top : 0px;
 text-decoration : none;
}
#sub
{
 text-align: right;
 background-color: #D9D6CB;
 color: #D9D6CB;
 font-size: 0px;
 padding: 0px;
             border-left: 0px solid #CCCCCC;
             border-right: 0px solid #CCCCCC;
             height: 0px;
             background-image:url(http://blog.biaer.net/line.gif);
}
.Framework
{
             border:0px solid black;
             border-top: 0px solid black;
             border-bottom: opx solid Black;
             width: 700px;
             align: center;
             border-left: 1px solid Black;
             border-right: 1px solid Black;
             background-color: #E2F3DA;
}
body {
 font-size : 9pt;
 font-family : Times New Roman, Times, serif;
 margin-left : 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding: 30px;
 padding-bottom: 0px;
 padding-top: 0px;
 background-color: #ECECEC;
             text-align: center;
}
#leftmenu {
 position : relative;
 left : 0px;
 width : 120px;
 height: 100%; 
 padding: 0px;
 padding-bottom : 5px;
             background-color: #E2F3DA;
}
#leftmenu h3 {
 font-size : 1em;
font-family:Georgia, Times New Roman, Times, serif;
             color: #00600;
 margin : 0px;
 padding : 4px;
 border-bottom : 1px solid #BBBBBB; 
             border-top: 1px solid #BBBBBB;
}
#leftmenu li {
 display : inline;
font-family:Georgia, Times New Roman, Times, serif;
}
.MainCell
{
 border-left: 1px solid #DDDDDD;
 border-bottom: 1px solid #DDDDDD;
 padding: 10px;
 background-color: White;
 vertical-align: top;
             width: 100%
}
.post
{
 font-size: 10pt;
             border-bottom-width: 1px;
 border-right-width: 1px;
}
.post .postfoot
{
 margin: 0px;
 margin-top: 14px;
             text-align: right;
 color: #FFFFFF;
 border-top: 1px solid #DDDDDD;
 font-size: 0.8em;
}
#LeftCell
{
 width: 200px;
 vertical-align: top;
             border-right: 1px solid #000000
             background-color: #E2F3DA;
}
.FooterCell
{
 vertical-align: top;
             background-color: #E2F3DA;
}
p.date {
 font-size : 14pt;
            font-family: Georgia, Times New Roman, Times;
 font-weight : bold;
             font-style: italic; 
 margin-bottom : 0px;
 padding : 2px;
 color : #666666;
 text-align: right;
}

### 自定义 Vant Popover 组件样式的方法 为了有效自定义 Vant 的 Popover 组件样式,可以采用种方式来确保样式能够按照需求正确应用。 #### 方法一:使用全局样式覆盖默认样式 可以直接在项目的全局样式文件中添加针对 `.van-popover` 类的选择器及其子元素的样式规则。这种方式简单直接,适用于不需要特别隔离样式的场景[^2]。 ```css .van-popover { /* 调整 popover 整体外观 */ } .van-popover__content { /* 修内容区域的具体表现形式 */ } ``` #### 方法二:利用 Less 文件定制主题颜色和其他变量 如果希望更深入地调整组件的主题风格,则可以在项目根目录下的 `main.js` 中导入特定的 Less 文件,并通过配置 Vue CLI 来修 Vant 提供的基础样式变量。这允许开发者灵活变整个应用程序内的组件视觉效果而不仅仅是单一实例。 首先,在 `vue.config.js` 配置文件里指定要加载的额外 Less 文件路径: ```javascript const path = require('path') module.exports = { css: { loaderOptions: { less: { lessOptions: { modifyVars: { hack: `true; @import "${path.resolve(__dirname, 'src/styles/vantCss.less')}";` } } } } } } ``` 接着,在上述提到的 `vantCss.less` 文件内编写具体的样式重载规则: ```less // src/styles/vantCss.less @import (reference) '~vant/packages/theme-chalk/src/common'; /* 这里可以根据需要重新定义任何想要更的颜色或其他属性 */ .van-popover { background-color: #fff; &__arrow { border-top-color: transparent !important; border-right-color: transparent !important; border-left-color: currentColor !important; border-bottom-color: currentColor !important; } // 更个性化设置... } ``` 这种方法不仅限于简单的 CSS 属性变更;还可以涉及复杂的结构变化或交互行为优化。 #### 方法三:局部作用域样式(Scoped Styles) 对于某些特殊情况下仅需影响单个页面或组件内部使用的 Popover 实例时,推荐使用 scoped 样式标签结合深度选择符 (`>>>`) 或者 `/deep/` 关键字来进行更加精确的目标定位。 ```html <template> <div class="customized-popover"> <!-- 使用 Popover --> </div> </template> <style scoped> .customized-popover >>> .van-popover { font-size: 18px; color: red; } </style> ``` 以上三种方案提供了不同程度上对 Vant Popover 组件进行样式自定义的可能性,具体选用哪种取决于实际开发过程中的需求和技术栈偏好。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值