html5 css问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5 css问题相关的知识,希望对你有一定的参考价值。

.navbar .brand
position: relative;
padding: 15px 20px 15px 20px;
color: #a3a3a3;
text-shadow: 0 1px 0 #ffffff;
border-right: 1px solid #bfbfbf;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;

这个是不是一个颜色饯变效果
我想修改成红色饯变怎么改?

那你就把颜色改一下呗color: #a3a3a3; 颜色码这个改一下后面#号这个 改成红色的 参考技术A 这不是渐变,是一个动画效果来的,与之对应的应该还有一个CSS:
.navbar .brand:hover....或者其它状态(如:focus等)
就是当鼠标经过时,在0.3s内就会从上面的状态变换成:hover状态
参考技术B transition是个简单的线性动画效果。
不知道你是要改这个动画效果还是要改填充色?

这个简单的 HTML、CSS 布局有啥问题? [复制]

【中文标题】这个简单的 HTML、CSS 布局有啥问题? [复制]【英文标题】:What is the issue with this simple HTML, CSS layout? [duplicate]这个简单的 HTML、CSS 布局有什么问题? [复制] 【发布时间】:2015-09-08 08:35:16 【问题描述】:

虽然这是一个非常简单的 HTML、CSS 布局,但我遇到了这个问题。它看起来不像我想要的那样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        body 
            margin: 0;
            padding: 100px;
            width: 100%;
        
        div.container 
            border: 3px red solid;
            padding: 10px;
            display: block;
            width: 1000px;
        
        div.left, div.right 
            float: left;
            margin: 0 10px;
        
        div.left 
            background: blue;
            height: 300px;
            width: 300px;

        
        div.right 
            background: green;
            width: 300px;
            height: 300px;
        
    </style>
</head>
<body>
    <div class="container">This is the main container
        <div class="left">This is the left side</div>
        <div class="right">This is the right side</div>
    </div>

    I want to know why left and right blocks overlaps the container element?
</body>
</html>

为什么左右块与container元素重叠?

我上传了在 PC 上的 Chrome 中执行的代码的屏幕截图。这是 Google Drive 预览链接:https://drive.google.com/open?id=0B4av_i4gqoZmRFpXbzVZekR0aGs&authuser=0

提前致谢。

【问题讨论】:

【参考方案1】:

在您的 CSS 文件中添加此样式:

.container:before,
.container:after 
    display: table;
    content: " ";


.container:after 
    clear: both;

这应该可以解决问题!

【讨论】:

以上是关于html5 css问题的主要内容,如果未能解决你的问题,请参考以下文章

什么是HTML5和CSS3

HTML5、CSS3 弹性框无法正常工作 [重复]

html5+ css3 平均分配各列

css / html5:拖放后悬停状态保持不变

HTML5 表单文本占位符 - 它们有 CSS 伪类吗?

像 BluePrint/960gs 这样的 HTML5+CSS3 框架?