个人中心
gpt4 book ai didi

jquery - HTML/CSS - 页面上两个
  • 部分的样式

    • 转载 作者：太空宇宙 更新时间：2023-11-04 12:44:59 25 4
    gpt4 key购买 nike

    我现在有一个 html 页面的小问题。

    该页面设置了 2 篇博文。他们都在自己的边界部分使用 <li> .

    我也用<li>用于我的导航和博客文章，但样式围绕两者。

    我知道这一定与创建类或 ID 或其他东西有关，但我就是无法让它工作。提前致谢!!

    任何指点都会非常感谢!

    HTML: 

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <link href="coursework1.css" rel="stylesheet" type="text/css">
    <title>Hobbies</title>

    <script src="scripts/jquery-1.11.1.min.js"></script>
    <script src="scripts/modernizr-custom.73764.js"></script>
    <script src="scripts/webshim/polyfiller.js"></script>
    <script>
        $.webshims.polyfill('mediaelement');
      </script>
    </head>
    <body>
    <h1> Hobbies </h1>
    <nav class="nav">
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Hobbies</a></li>
      <li><a href="/clients/">Newsletter</a></li>
    </nav>
    <p>  
           <ul> 
        <li> 
            <p>  <h2> Pompey Win! - March 14, 2012 </h2> </p> 
            <img class="focus pic" src="pompeygoal.jpg"
       style="float:left; width:400px; height:300px; border:none;"
        />
           <img class="focus pic" src="pompeychallenge.jpg"
       style="margin-left: 50px; width:400px; height:300px; border:none;"
        />
         <img class="focus pic" src="andyawford.jpg"
       style="float:right; width:400px; height:300px; border:none;"
        />  
            <p> On tuesday evening of this week, I went to Portsmouth. Unfortunately, I do support them... But being the good fan I am , I still made the trip down to the south coast to show my support. It turned out to be a really good evening though as we ended up winning 3-2!</p> 
        </li> 
        <li> 
            <p> <h2>Notting Hill Carnvial - March 13, 2012 </h2> </p> 
            <video width="480" height="360" controls id="nhVid">
        <source src="NottingHillVid.mp4" type="video/mp4">
        <source src="NottinHillVid.webm" type="video/webm"> </video>   
         <p> Every summer, I always look forward to Notting Hill Carnival. This year was my third year, and I had a great time. It was extremely wet, however this did not dampen spirits and everyone still had a smile on their face. I saw loads of music and also had some really great jerk chicken. <p>  
        </li> 
    </ol>
    </body>
    </html>

    CSS: 

    @charset "UTF-8";

    body {
      background-color:#808080; 
      font-family:symbol, 'Standard Symbols L';
      margin: 0 0 100px;
    }

    h1 { 
      text-align: center;
      color: white;
      text-shadow: 2px 2px #000000;
      font-size:350%;
    }

    h2 {
      color: white;
      font-size:30px;
      text-align:center;
    }

    #tableAbout { 
      width:100%; cellpadding:10; cellspacing:5;
      font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
      color: white; table align:center;
    }

    .nav{  
      list-style:none;
      text-align:center;
      border-style: solid;
      border-width: 2px;
      background: -webkit-linear-gradient(grey, black);
      background: -o-linear-gradient(grey, black);
      background: linear-gradient(grey, black);
    }

    .nav li{
        display:inline;
    }

    .nav a{
      display:inline-block;
      padding:10px;
        transition: all 0.2s ease-in;
        color: white;
        font-size:25px; 
    }

    .nav a:hover{
      -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 1px 20px white;
    }

    td[target] {
      font-weight: bold;
    }

    #newsletterForm {
        color: white;
    }

    footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:60px; 
      clear:both;
      left: 0;
      font-color:black;
      text-align: center;
      font-weight: bold;
      font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    }

    html {
      position: relative;
      min-height: 100%;
    }

    .focus {
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }

    .focus:hover {
      border: 70px solid #000;
      border-radius: 50%;
    }


    li { 
      background-color: rgba(194, 181, 158, .5); 
      border: 1px solid rgb(194, 181, 158); 
      border-radius: 10px; 
      margin: 10px 0; 
      padding:10px;
    }

    li:nth-child(even){ 
      background-color: rgba(242, 224, 131, .5);  
      border: 1px solid rgb(242, 224, 131); 
    }

    ul
    {
      list-style-type: none;
    }

    最佳答案

    我不会下载 zip，但正如您提到的，这两篇博文都在各自的部分中使用 <li> ，它可以像这样工作(示例类名和 CSS):

    HTML:

    <ul>
      <li class="blogOne">
        content
      </li>
      <li class="blogTwo">
      content
      </li>
    </ul>

    CSS:

    .blogOne
    {
       color:red;
    }
    .blogTwo
    {
       color:blue;
    }

    关于jquery - HTML/CSS - 页面上两个 <li> 部分的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26579058/

    25 4 0
    文章推荐： java - 从 JFrame 录制视频
    文章推荐： c++ - 按返回类型重载
    文章推荐： c++ - 在这种情况下如何防止 C++ 输出/控制台表单关闭
    文章推荐： java - 我怎样才能获得工作 Selenium
    太空宇宙
    个人简介

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

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com