HTML+CSS 阴影、垂直菜单、文本位置-6ren

HTML+CSS 阴影、垂直菜单、文本位置

转载作者：太空宇宙更新时间：2023-11-04 13:22:20

另一个问题。

试图得到这个:http://imgur.com/oXLboQx

现在我有:http://imgur.com/LCDlngS

基本上，1) 如何在页面的左侧和右侧添加一个？如果我使用这段代码

width: 800px; height: 805px;
-webkit-box-shadow: 4px 20px  #222,  -4px 0 20px #222;   
-moz-box-shadow: 4px 0 20px #222,  -4px 0 20px #222;   
box-shadow: 4px 0 20px #222,  -4px 0 20px #222;

阴影出现，但网站停留在左下角。如果我删除宽度选项，它也会将阴影添加到白色背景。

2) 有什么方法可以像图片那样将文本“Spausk mane”移动到底部吗？

3) 是否有一些设置可以修复垂直菜单？我尝试了 padding, display:block 但是白色的底部边框没有随按钮一起拉伸(stretch)。

谢谢

<html>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <head>
        <title>Mokausi HTML, CSS ir JS</title>
    </head>

    <style>
    /*visas css eina cia*/
        body, html {
            margin: 0;
            padding: 0;
            line-height: 19px;
            font-size: 15px;
        }
        .cf:before,
        /*clear fix klase*/
        .cf:after {
            content:"";
            display:table;
        }
        .cf:after {
            clear:both;
        }
        .cf {
            zoom:1;
        }
        .tipoPaveiksliukas {
            background: #fff;
            width: 150px;
            height: 140px;
            display:inline-block;

            margin: 0px 10px 13px 13px;
            /*reikia papildyti cia bisky*/
        }
        .main {
            position: relative;
            width: 800px;
            height: 855px;

            margin: 0 auto;
            background: #C6E070;
            /*reikia papildyt*/
        }
        .kalbos {
            position: absolute;
            top: 0;
            right: 10px;
            background: #287D7D;
            padding: 2px 5px;
            color: #fff;
        }
        .kalbos:hover {
            cursor: pointer;
        }
        .visosKalbos {
            position: absolute;
            top: 23px;
            right: 10px;
            background: #1C344C;
            padding: 5px;
            z-index: 10;
            display: none;
        }
        .visosKalbos a {
            display: block;
            color: #fff;
            text-decoration: none;
        }
        body {
            background: #F2F2F2;
            font-family:"Arial";
            color: #1C344C;
        }
        .shadow {

    }


        .header {
            margin-top:7px;
            font-size:26;
            font-style:italic;
        }
        .menu-horizontal-wrap {
            margin: 10px 20px 5px 20px;
            background-color: #287D7D;
            padding:10px;
        }
        .menu-horizontal-wrap a {
            color:#FFF;
            text-decoration: none;
            padding: 6px;
        }
        .menu-horizontal-wrap a:hover {
            /*galite improvizuoti*/
            background-color:gray;
        }
        .menu-horizontal-wrap a:last-child {
            /*paskutinis virsutinio meniu elementas kazkoks kitoks*/
        }
        .col-left {
            display:inline-block;
        }
        .col-right {
            display:inline-block;
            vertical-align:top;
            width:600px;
        }
        .menu-vertical-wrap {
            margin: 10px 20px 5px 20px;
            background-color: #287D7D;
            padding:4px;

        }
        .menu-vertical-wrap a {
            color:#FFF;
            text-decoration: none;
             margin-top: 8px;
             display:block;
            border-bottom:1px solid white;
        }
        .menu-vertical-wrap a:hover {
            /*galite improvizuoti*/
        }
        h1 {
        }
        .naujiena {

 background:#99CC00; 
margin-bottom: 20px;
padding-bottom: 5px;

        }
        a.cta {
            color:white;
            text-decoration: none;
        }
        a:hover.cta {
            /*kas nutika kai uzvedate pele ant cta mygtuko, galite improvizuoti*/
        }
        .cta h3 {
            background-color:#287D7D;
            width: 150px;
            height: 110px;
            float:left;
            margin: 0px 20px 10px 20px;
            text-align: center;
            position: relative;
            bottom:0px;
            left: 20px;
        }
        .lentele {
            border-collapse: collapse;
            border:1px solid black;
            /*reikia papildyti*/
        }
        .lentele th {
            background:black;
            color:white;
        }
        .lentele td {
            border:1px solid black;
        }
        .lentele tr {
            background-color:#A8A8A8;
            border:1px solid black;
        }
        .lentele tbody tr:nth-child(even) {
            background-color: #D0D0D0;
        }
        .footer {
        }
        .text {
            display:inline-block;
            width:400px;
        }

    </style>

    <body>
        <div class="shadow">
    <div class="main cf">
        <div class="kalbos">Kalba</div>
        <div class="visosKalbos"> <a href="#">Lietuviu</a>
 <a href="#">English</a>
 <a href="#">Pa Ruski</a>

        </div>
        <div class="header" align="center"> <b>MANO MOKOMASIS PUSLAPIS</b> 
        </div>
        <div align="center" class="menu-horizontal-wrap"> <a href="#">MENIU PUNKTAS | </a>
 <a href="#">MENIU PUNKTAS | </a>
 <a href="#">MENIU PUNKTAS | </a>
 <a href="#">MENIU PUNKTAS </a>

        </div>
        <div class="cf">
            <div class="col-left">
                <div class="menu-vertical-wrap"> <a href="#">Meniu punktas</a>
                    <br> <a href="#">Meniu punktas</a>
                    <br> <a href="#">Meniu punktas</a>
                    <br> <a href="#">Meniu punktas</a>
                    <br> <a href="#">Meniu punktas</a>
                    <br> <a href="#">Meniu punktas</a>
                    <br> <a href="#">Meniu punktas</a>
                    <br> <a href="#">Meniu punktas</a>
                    <br>
                </div>
            </div>
            <!-- end of col-left -->
            <div class="col-right">
                 <h1>NAUJIENOS</h1>

                <hr size=1>
                <div class="naujiena cf">
                      <div class="naujiena">
                        <div class="tipoPaveiksliukas"></div>
                        <div class="text">
                            <h2>Naujienos antraste</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dignissim lacus. Curabitur consequat pharetra placerat. Nullam pretium vehicula tortor. Vivamus diam orci, consectetur ullamcorper eleifend ut, aliquet a arcu. Phasellus congue eleifend rhoncus. Vestibulum vulputate bibendum rutrum.
                    </div>
                    </div>
                </div>


                <div class="naujiena cf">
                  <div class="naujiena">
                        <div class="tipoPaveiksliukas"></div>
                        <div class="text">
                         <h2>Naujienos antraste</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dignissim lacus. Curabitur consequat pharetra placerat. Nullam pretium vehicula tortor. Vivamus diam orci, consectetur ullamcorper eleifend ut, aliquet a arcu. Phasellus congue eleifend rhoncus. Vestibulum vulputate bibendum rutrum.</div>
                   </div>
                  </div>
                    <div class="cta-wrap cf"> <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
 <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
 <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>

                    </div>
                    <table width="550" style="text-align:center;" align="center" class="lentele">
                        <thead>
                            <tr>
                                <th>Antraste</th>
                                <th>Antraste</th>
                                <th>Antraste</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Foo</td>
                                <td>Foo</td>
                                <td>Foo</td>
                            </tr>
                            <tr>
                                <td>Bar</td>
                                <td>Bar</td>
                                <td>Bar</td>
                            </tr>
                            <tr>
                                <td>Foo</td>
                                <td>Foo</td>
                                <td>Foo</td>
                            </tr>
                            <tr>
                                <td>Bar</td>
                                <td>Bar</td>
                                <td>Bar</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- end of col-right -->
            </div>
            <!-- end of cf -->
            <hr size=1>
            <div align="center" class="footer">Mano labai kietas web'as &copy visos teises saugomos</div>
        </div>
        <!-- end of main -->

        <script>
        // reikia papildyti sita koda kad dar karta paspaudus ant kalbos mygtuko kalbu pasirinkimas uzsidarytu
            var kalbuBusena = 'closed';

            $('.kalbos').click(function(){
                $('.visosKalbos').slideToggle('fast');
                kalbuBusena = 'open';

            });

        </script>
</div>
    </body>
</html>

最佳答案

1) box-shadow 可以带多个参数，用逗号隔开，像这样:

box-shadow: 0 2px 5px gray,  0 -2px 5px gray;

2) 尝试:

position: absolute;
bottom: 0;

3) “修复”到底是什么意思？

关于HTML+CSS 阴影、垂直菜单、文本位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23964103/

文章推荐： javascript - 移动对象并更改按钮 onClick 上的不透明度

文章推荐： c++ - OpenCL - 无法修改值

文章推荐： c++ - 如何转发声明内部类？

XNA 阴影？
如何在 XNA 中用图元(线条)制作的矩形周围制作阴影效果？我目前正在制作我的矩形，方法是将图元放入我制作的批处理中，然后添加纹理作为它们的背景。这些矩形应该象征着“ window ”。我希望它们也
opengl - 漫射光/阴影
我刚刚在引擎中安装了照明系统。在以下屏幕截图中，您可以看到一个亮起的指示灯(黄色方框): 考虑到在照亮场景的光线之上，它还实现了FOV，该FOV将遮挡视场之外的任何物体。这就是为什么阴影的左侧部分看起
java - 在本地jar到gradle项目中的阴影/阴影
我是不熟悉Gradle并尝试编译我的项目的新手，但是也“阴影化”(就像在maven中一样)本地jar文件。我正在尝试使用gradle shadow插件，但是当我运行“shadowJar”时，它并没有
JavaScript map 阴影
用 JavaScript 编写解析器，对于任何语言，显然都使用 Map 来存储名称到变量的映射。大多数语言允许以某种方式或内部作用域中的另一个变量遮蔽外部作用域中的变量。实现这一点的理想数据结构是功
C++ 继承相同类型签名的成员函数(阴影)
// Shadowing #include using namespace std; const int MNAME = 30; const int M = 13; class Pers
Android 导航栏和状态栏高程/阴影
我想设置我的导航栏和状态栏，就像下面链接中图片中的示例一样。我怎么能这样做 see the example 最佳答案您可以通过像这样设置样式属性来简单地做到这一点: se
java - 阴影/变量范围
我以为我理解阴影的概念。但是这段代码让我想知道: public class Counter { int count = 0; public void inc() { count++; } pu
ios - UINavigationController 阴影
尝试遵循概述的方法 here为我的 UINavigationController 添加阴影。但是，该方法似乎不起作用。这是我使用的代码: - (void)viewDidLoad { [sup
ios - UITableViewCell 阴影
如何给 UITableViewCell 上下两边添加阴影？我试过这个: cell.layer.shadowOpacity = 0.75f; cell.layer.shadowRadius = 5.0
html - 光标上奇怪的不透明度/阴影？
我有一个博客，我为它制作了自定义光标，但它们并不是我想要的样子。使用一些免费的光标编辑程序制作光标，它们看起来只有一种颜色，没有边框、黑色或阴影。即使以图片形式上传后，在线.png 文件看起来也没有阴
css - 饼图 - 阴影
我能得到像这张附图那样的带阴影的饼图吗？如果是，怎么办？这是饼图的代码: 最佳答案遗憾的是，Kendo UI 饼图不支持任何 3D 元素。您可以在 Telerik 论坛中阅读相关信息 he
CSS 阴影 :inset
我一直试图获得给定的 curl 阴影效果 here对于 box-shadow:inset 但没有得到任何东西。任何onw有任何线索我可以让它工作吗？一直试图让它在这个上工作jsfiddle 将其更
javascript - 单击后保留边框/阴影
我正在构建一个类似商店的东西，所以我有产品，侧面有圆形按钮，当我点击它们时，它会改变产品的颜色。一切都很完美，但我希望当我单击按钮时，按钮保持高亮状态。代码: CSS: #but1 { posi
html - 中底框-阴影
我想创建一个底部边框下方有框显示的 H2 这是我的“基本”代码: My H2 #toto{ box-shadow: 0 4px 2px -2px gray; } 但我想
css - 如何删除列表中元素之间的空格/阴影
我有一个包含卡片列表的模板: --> {{event.eventTitle}} {{event.eve
CSS 阴影(如何摆脱顶部阴影？)
CSS 阴影有问题。我不知道如何摆脱这里的顶部阴影:http://i.imgur.com/5FX62Fx.png 我得到的: box-shadow: 0 -3px 4px -6px #777, 0 3
java - 如何删除状态栏和主屏幕之间的分隔线/阴影？
在我的应用程序中，我想保留状态栏但使其背景与主屏幕相同。所以我创建了一个自定义主题来设置应用程序背景: @drawable/background_shelf true
android ListView 阴影
滚动 ListView 时如何去除阴影。我在列表的顶部和底部出现了阴影。最佳答案关于android ListView 阴影，我们在Stack Overflow上找到一个类似的问题： https
iOS:MaterialComponents 阴影
我想在我的 Swift 4 中使用 MaterialComponents 为我的 View 添加阴影，但我不明白如何使用阴影电梯。我创建了一个名为 ShadowedView 的类，类似于 docume
ios - CAShapeLayer 阴影
给定以下 CAShapeLayer 是否可以在提示处添加如下图所示的阴影？我正在使用 UIBezierPath 来绘制条形图。 - (CAShapeLayer *)gaugeCircleLayer

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

HTML+CSS 阴影、垂直菜单、文本位置