day07

A.今天学到了什么

1.实现一个下拉菜单(运用知识点float,position)

<div class="body">
    <ul class="item">
        <li>首页
            <ul class="item-ul">
                <li>个人中心</li>
                <li>购物车</li>
            </ul>
        </li>
        <li>菜单</li>
        <li>卖家中心</li>
    </ul>
</div>
 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .body {
            width: 1000px;
            height: 40px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;
        }

        ul {
            list-style: none;
        }

        .item {
            width: 1000px;
            height: 40px;
        }

        .item > li {
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
        }

        .item li:hover {
            background-color: palevioletred;
        }

        .item-ul {
            background-color: pink;
            display: none;
        }

        .item > li:hover > ul {
            display: block;
        }
    </style>

width的继承问题

给父级相对定位,子级绝对定位,子级不会继承父元素的宽度

css3常用样式的讲解

1.边框border-radius 可以将边框设置为圆角

border-radius:value :四个边都会改变
可以单独改变一边
1.border-top-left-radius: value;
2.border-top-right-radius:value;
3.border-bottom-left-radius:value;
4.border-bottom-right-radius:value;

2.box-shadow可以给元素添加阴影

h-shadow
//必需 水平阴影的位置。允许负值。
//必需。垂直阴影的位置。允许负值。
blur
//可选。模糊距离。
spread
//可选。阴影的尺寸。
color
//可选。阴影的颜色
inset
//可选。将外部阴影 (outset) 改为内部阴影。
以上可以合写为:
box-shadow:h-shadow v-shadow blur spread  color inset;
<body>
<div class="body"></div>
</body>
<style>
        div {
            width: 600px;
            height: 600px;
            background-color: pink;
            box-shadow:0 0 10px 10px black inset;
        }
    </style>

3.文字效果//设置文字的阴影

2.3.1text--shadow:h-shadow v-shadow blur color;(!用的不多)
2.3.2text--shadow:文字溢出属性指定如何显示溢出内容
p{
overflow:hidden;
text--shadow:ellipsis;
//文字阴影:省略
white-space:nowrap;
//文字不换行
//white-space指定文字是否换行
}
<div></div>
<style>
        div{
            width: 300px;
            height: 300px;
            background-color: aqua;
            overflow: hidden;
            text-overline: ellipsis;
            white-space: normal;
        }
        div:hover {
            box-shadow: 0px 0px 10px 10px #cccccc inset;
            text-shadow: 3px 3px 1px #ccc;
        }
    </style>

B我今天掌握了什么

1.实现一个下拉菜单(运用知识点float,position)

<div class="body">
    <ul class="item">
        <li>首页
            <ul class="item-ul">
                <li>个人中心</li>
                <li>购物车</li>
            </ul>
        </li>
        <li>菜单</li>
        <li>卖家中心</li>
    </ul>
</div>
 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .body {
            width: 1000px;
            height: 40px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;
        }

        ul {
            list-style: none;
        }

        .item {
            width: 1000px;
            height: 40px;
        }

        .item > li {
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
        }

        .item li:hover {
            background-color: palevioletred;
        }

        .item-ul {
            background-color: pink;
            display: none;
        }

        .item > li:hover > ul {
            display: block;
        }
    </style>

width的继承问题

给父级相对定位,子级绝对定位,子级不会继承父元素的宽度

css3常用样式的讲解

1.边框border-radius 可以将边框设置为圆角

border-radius:value :四个边都会改变
可以单独改变一边
1.border-top-left-radius: value;
2.border-top-right-radius:value;
3.border-bottom-left-radius:value;
4.border-bottom-right-radius:value;

2.box-shadow可以给元素添加阴影

h-shadow
//必需 水平阴影的位置。允许负值。
//必需。垂直阴影的位置。允许负值。
blur
//可选。模糊距离。
spread
//可选。阴影的尺寸。
color
//可选。阴影的颜色
inset
//可选。将外部阴影 (outset) 改为内部阴影。
以上可以合写为:
box-shadow:h-shadow v-shadow blur spread  color inset;
<body>
<div class="body"></div>
</body>
<style>
        div {
            width: 600px;
            height: 600px;
            background-color: pink;
            box-shadow:0 0 10px 10px black inset;
        }
    </style>

3.文字效果//设置文字的阴影

2.3.1text--shadow:h-shadow v-shadow blur color;(!用的不多)
2.3.2text--shadow:文字溢出属性指定如何显示溢出内容
p{
overflow:hidden;
text--shadow:ellipsis;
//文字阴影:省略
white-space:nowrap;
//文字不换行
//white-space指定文字是否换行
}
<div></div>
<style>
        div{
            width: 300px;
            height: 300px;
            background-color: aqua;
            overflow: hidden;
            text-overline: ellipsis;
            white-space: normal;
        }
        div:hover {
            box-shadow: 0px 0px 10px 10px #cccccc inset;
            text-shadow: 3px 3px 1px #ccc;
        }
    </style>

C今天没有掌握的

没有
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,241评论 0 8
  • 1、实现一个下拉框(运用知识点float,position) 2、CSS3常用样式的讲解 2.1边框border-...
    陈梦晴阅读 1,683评论 0 0
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,561评论 0 7
  • A、今天我学到了什么 1、实现一个下拉框(运用知识点float,position) //HTML //CSS 2、...
    向钱看丷向厚赚阅读 1,618评论 0 0
  • 0317晨读感悟 阴影效应当你指向别人的时候,手中至少有三个拇指是指向自己的吧?初入社会以来,被各种世俗权利观念所...
    谢小可要努力努力努力努力阅读 1,085评论 0 0