Question

我试图在我下载的模板中添加一个下拉列表，但对于现有模板，我并不是最好的CSS。

HTML代码：

    <header>
  <div class="main">
    <div class="wrapper">
      <h1><a href="index.html">KB Customs</a></h1>
      <div class="fright">
      <div class="indent"> <span class="address">MI 49544</span> <span class="phone">Tel: 174</span> </div>
      </div>
    </div>
    <nav>
      <ul class="menu">
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="maintenance.html">Products </a></li>

          <!-- Insert 5 drop downs here ------------------------->

        <li><a href="repair.html">Gallery</a></li>
        <li><a href="price.html">FAQ & Prices</a></li>
        <li><a href="locations.html">Contact Us</a></li>
      </ul>
    </nav>
    <div class="slider-wrapper">
      <div class="slider">
        <ul class="items">
          <li> <img src="images/slider-img1.jpg" alt="" /> </li>
          <li> <img src="images/slider-img2.jpg" alt="" /> </li>
          <li> <img src="images/slider-img3.jpg" alt="" /> </li>
        </ul>
      </div>
      <a class="prev" href="#">prev</a> <a class="next" href="#">next</a> </div>
  </div>
</header>

目前有的CSS：

/***** menu *****/
header nav {
width:100%;
height:52px;
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
overflow:hidden;
}

#page1 header nav {
margin-bottom:28px;
}

.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) left top no-repeat;
}

.menu > li:first-child {
background:none;
}

.menu li a {
display:inline-block;
font-size:18px;
line-height:25px;
padding:12px 28px 12px 29px;
color:#808080;
text-transform:capitalize;
}

 .menu > li:first-child > a {
text-indent:-999em;
background:url(../images/menu-home.png) center -25px no-repeat;
min-width:22px;
}

 .menu li a.active, .menu > li > a:hover {
color:#fff;
}

 .menu > li:first-child > a.active, .menu > li:first-child > a:hover {
background-position:center 15px;
 }

我这样的主要问题是我不知道＃和之间的区别。还有什么＆gt;确实

抱歉，如果我听起来像一个菜鸟，已经离开CSS一段时间了。

编辑：我很欣赏所有这些内容的解释，但有人可以帮助我实现目标吗？：）

Answer 1

让我单独考虑每一个：

#：按id选择元素。例如，#myElement将选择此div：
```
<div id="myElement"></div>
```
ID在页面上是独占的，因此它只会为具有该ID的第一个元素设置样式。

.：选择具有给定类的所有元素。例如，.myClass将选择以下所有元素。

<div class="myClass">
   <h1 class="myClass">Header</p>
   <p class="myClass">Text</p>
</div>

>选择左侧选择器的直接子项。例如，此选择器：.myClass > .mySubClass将选择带有文本“Foo”的div，而不选择带有“Bar”或“Baz”文本的<div class="myClass"> <div class="mySubClass">Foo</div> <div class="notMySubClass"> <div class="mySubClass">Bar</div> </div> </div> <div class="mySubClass">Baz</div>：
```
.menu ul ul ul
```

回答评论问题：

问： .myClass > .mySubClass是什么意思？

A：在CSS中看到空格的任何地方，都意味着“后代”。在上面针对.myClass .mySubClass的（更新）示例中，如果我使用了div，那么它会选择带有文本“Foo”的div和带有文本的div酒吧”。即使带有“条形码”的div不是class="myClass" .menu ul ul ul的直接后代。

ul会在下一个示例中选择所有<div class="menu"> <ul> <li> <ul> <li> <ul>  <li>Foo</li> <li>Bar</li> <li> <ul>  <li>Foo</li> </ul </li> </ul> </li> <li> <ul>  <li>Foo</li> <li>Bar</li> </ul> </ul> </li> </ul> </div>，并注明：

clear; clc;

binary_img = imread('bin.jpg') > 100;

% Get boundaries
b = bwboundaries(binary_img);

% Get largest boundary
b = b{cellfun(@length,b) == max(cellfun(@length,b))};

% Filter boundary - use circular convolution
b(:,1) = cconv(b(:,1),fspecial('gaussian',[1 81],40)',size(b,1));
b(:,2) = cconv(b(:,2),fspecial('gaussian',[1 81],40)',size(b,1));

% Find curvature
curv_vec = zeros(length(b),1);
for i = 0:size(b,1)-1
    p_b = b(mod(i-25,length(b))+1,:); % p_b = point before
    p_m = b(mod(i,length(b))+1,:);    % p_m = point middle
    p_a = b(mod(i+25,length(b))+1,:); % p_a = point after

    dx_ds = p_a(1)-p_m(1);              % First derivative
    dy_ds = p_a(2)-p_m(2);              % First derivative
    ddx_ds = p_a(1)-2*p_m(1)+p_b(1);    % Second derivative
    ddy_ds = p_a(2)-2*p_m(2)+p_b(2);    % Second derivative
    curv_vec(i+1) = dx_ds*ddy_ds-dy_ds*ddx_ds;
end

% Find local maxima for curvature
[pks,locs] = findpeaks(curv_vec);
[pks,pks_idx] = sort(pks);

% Select two largest curvatures
p1_max = b(curv_vec == pks(end),:);
p2_max = b(curv_vec == pks(end-1),:);

% Paint biggest contiguous region
rp = regionprops(binary_img,'Area','PixelIdxList','PixelList');
rp = rp(max(vertcat(rp.Area)) == vertcat(rp.Area));

% Paint all points to the left of the line
img = zeros(size(binary_img));
img(rp.PixelIdxList) = 0.5;
for i = 1:length(rp.PixelList)     
    turn = sign(det([1 p1_max(1) p1_max(2);
                     1 p2_max(1) p2_max(2);
                     1 rp.PixelList(i,2) rp.PixelList(i,1);]));

    if (turn > 0) 
        img(rp.PixelList(i,2),rp.PixelList(i,1)) = 1;
    end
end

figure(1);
subplot(1,3,1);
plot(b(:,1), b(:,2),'o');
hold on;
plot(p1_max(1), p1_max(2),'ro','Markersize',5,'LineWidth', 5);
plot(p2_max(1), p2_max(2),'ro','Markersize',5,'LineWidth', 5);

subplot(1,3,2);
plot(curv_vec);

subplot(1,3,3);
imshow(img);

Answer 2

CSS不是很难理解。只需从W3Schools或this开始阅读教程。刚刚开始：

#, ., >等都称为选择器。 CSS选择器允许您选择和操作HTML元素。 '＃'是指任何HTML元素的ID，通常是唯一的，例如：page1。。指的是class属性。
类选择器选择具有特定类属性的元素。许多元素可以具有相同的类名，因此它们都可以具有相同的样式。示例：.menu表示类名。
>指的是直接后代选择器，即任何其他元素的直接后代的任何元素。示例.menu > li。在这种情况下，li父项的所有直接.menu子项都将指定样式。
:first-child, :last-child等被称为伪类选择器，并提供用于定位特定元素的其他选项。在您的案例中示例：.menu > li:first-child将引用first li child of menu class。

尝试将Dropdown添加到菜单

2 个答案: